使用按钮更改颜色

Question

有没有办法让我为这个功能编写更少的代码行？我想要这样，当您按下任一按钮时，它会在两种颜色之间交替。函数 green() 与 red 完全相反。

<h1 id="header">Red Or Green</h1>
<button id="redButton" onclick="red()">Red</button>
<button id="greenButton" onclick="green()">Green</button>

function red() {
  document.getElementById("header").innerHTML = "Red"
  document.getElementById('header').style.color = "red"
  document.getElementById('redButton').style.color = "white"
  document.getElementById('redButton').style.backgroundColor = "red"
  document.getElementById('greenButton').style.color = "black"
  document.getElementById('greenButton').style.backgroundColor = "grey"
}

Answer 1

// Cache the frequently accessed elements
const headerElement = document.getElementById("header");
const redButton = document.getElementById("redButton");
const greenButton = document.getElementById("greenButton");

// Event listener for the whole document, utilizing event delegation
document.addEventListener("click", function(event) {
  const targetId = event.target.id;
  
  if (targetId === "redButton") {
    headerElement.innerHTML = "Red";
    headerElement.style.color = "red";
    redButton.classList.add("active-red");
    greenButton.classList.remove("active");
  } else if (targetId === "greenButton") {
    headerElement.innerHTML = "Green";
    headerElement.style.color = "green";
    greenButton.classList.add("active-green");
    redButton.classList.remove("active");
  }
});

.active {
  color: white;
}

.active-red {
  color: white;
  background-color: red;
}

.active-green {
  color: black;
  background-color: grey;
}

<h1 id="header">Red Or Green</h1>
<button id="redButton">Red</button>
<button id="greenButton">Green</button>

Answer 2

您可以创建 CSS 类，并且可以根据您的要求添加和删除它们。

可以创建以下内容：

function red() {
  document.getElementById("header").innerHTML = "Red"
  document.getElementById('header').style.color = "red"
  document.getElementById('redButton').add("active-red");
  document.getElementById('greenButton').add("inactive");
}

function green() {
  document.getElementById("header").innerHTML = "Green"
  document.getElementById('header').style.color = "green"
  document.getElementById('redButton').add("inactive");
  document.getElementById('greenButton').add("active-green");
}

.inactive{
  color: black;
  background-color: grey;     
}

.active-red{
  color: white;
  background-color: red;   
}

.active-green{
  color: white;
  background-color: green;   
}

Answer 3

您可以尝试传递颜色，在此基础上您可以像下面这样设置样式：

function toggleColor(color) {
    const header = document.getElementById('header');
    const redButton = document.getElementById('redButton');
    const greenButton = document.getElementById('greenButton');
    
    //set header text & color based on the color passed
    header.textContent = color === 'red' ? 'Red' : 'Green';
    header.style.color = color;
    
    //set red button's text & background color
    redButton.style.color = color === 'red' ? 'white' : 'black';
    redButton.style.backgroundColor = color === 'red' ? 'red' : 'grey';
    
    //set green button's text & background color
    greenButton.style.color = color === 'green' ? 'white' : 'black';
    greenButton.style.backgroundColor = color === 'green' ? 'green' : 'grey';
}

<h1 id="header">Red Or Green</h1>
<button id="redButton" onclick="toggleColor('red')">Red</button>
<button id="greenButton" onclick="toggleColor('green')">Green</button>

Answer 4

也许是这样的：
与

<div id="buttons-group">

const
  e_header  = document.querySelector('#header')
  e_buttons = document.querySelector('#buttons-group')
  ;
e_buttons.onclick = e =>
  {
  if (!e.target.matches('button')) return;
  
  e_buttons.className = e_header.className = e.target.id; 
   
  e_header.textContent = e.target.textContent;
  }

#buttons-group>button {
  color: black;
  background-color: grey;
  }
#header.redButton   { color: red;   }
#header.greenButton { color: green; }

#buttons-group.redButton>#redButton {
  color            : red;
  background-color : white;
  }
#buttons-group.greenButton>#greenButton {
  color            : green;
  background-color : white;
  }

<h1 id="header">Red Or Green</h1>
<div id="buttons-group">
  <button id="redButton"> Red   </button>
  <button id="greenButton"> Green </button>
</div>