javascript - 背景颜色不会改变javascript

Question

我正在做一个小元素，我的背景颜色不会改变。 https://codepen.io/JorisMertz/pen/gjmZOa

这是我的代码笔，如果你能帮助我，我将不胜感激。

或者这是我的代码:

var container = document.getElementById("container");

function togl() {
  if (container.style.background == "#232323") {
    container.style.background = "#fafafa";
  } else {
    container.style.background = "#232323";
  }
}

* {
  font-family: roboto;
}

#container {
  color: #fafafa;
  background: #232323;
  padding: 20px;
  max-width: 60%;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  transform: translate(-50%, -50%);
}

body,
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #232323;
}

#toggle {
  appearance: none;
  border-style: none;
  padding: 7px 25px 7px 25px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  outline: none;
  cursor: pointer;
}

<div id="container">
  <h1>A cool heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet
    rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p>
  <button id="toggle" onclick="togl()">Toggle</button>
</div>

Answer 1

最推荐的方法是切换类，并使用addEventListener 而不是内联脚本

维护起来要简单得多，您可以将样式保存在一个地方，将脚本保存在一个位置，将标记保存在一个位置。

堆栈片段

var container = document.getElementById("container");
var button = document.getElementById("toggle");

button.addEventListener('click', function(){
  container.classList.toggle('toggled');
})

* {
  font-family: roboto;
}

#container {
  color: #fafafa;
  background: #232323;
  padding: 20px;
  max-width: 60%;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  transform: translate(-50%, -50%);
}
#container.toggled {
  background: #fafafa;
  color: #232323;
}

body,
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #232323;
}

#toggle {
  appearance: none;
  border-style: none;
  padding: 7px 25px 7px 25px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  outline: none;
  cursor: pointer;
}

<div id="container">
  <h1>A cool heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor.</p>
  <button id="toggle">Toggle</button>
</div>