Question

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

这是我的Codepen，如果您能帮助我，将不胜感激。

或者这是我的代码：

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>

Answer 2

这里是使用正确的代码链接到fixed codepen的链接，以及一些向您显示该值的日志记录语句。

简而言之，您需要通过ProtectedModule获取值：

getComputedStyle

请注意，var container = document.getElementById("container"); function togl() { console.log(container.style.backgroundColor); // empty string var bcolor = window.getComputedStyle(container).backgroundColor; console.log(bcolor); // rgb(35, 35, 35) if (bcolor == "rgb(35, 35, 35)"){ container.style.backgroundColor = "#fafafa"; } else { container.style.backgroundColor = "#232323"; } }，即它们是指定相同颜色的不同方法。

Answer 3

两件事。首先是element.style.background正在检查元素的样式 property （与CSS提供的值分开。要为该属性赋值，必须先为其赋值）您可以在第一次运行该函数的方式中看到此值是空的。

第二个问题是返回的值总是以rgb而不是十六进制返回。反转if语句以检查第一个切换状态，代码将起作用，因为第一个检查将是空属性值，因此不等于切换颜色。

var container = document.getElementById("container");

function togl() {
  console.log(container.style.background);
  if (container.style.background != "rgb(250, 250, 250)") {
    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>

或者，您可以使用getComputedStyle方法来确定元素的样式（这又与它的属性值不同）。

var container = document.getElementById("container");

function togl() {
  var curColor = window.getComputedStyle(container).backgroundColor;//always will report the value, even on the first execution
  console.log(curColor)
  if (curColor == "rgb(35, 35, 35)") {
    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>

最后，我的首选方法，您可以在单独的标志中跟踪状态。这样做的好处是，您不必担心任何浏览器报告的颜色值彼此不同（例如，如果一个浏览器在rgb值中未使用空格字符，则先前的代码会中断）。

var container = document.getElementById("container");
var toggled = false;
function togl() {
  
  if (!toggled) {
    container.style.background = "#fafafa";
  } else {
    container.style.background = "#232323";
  }
  toggled = !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%);
}

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 4

问题已解决！首先是在检查style属性，但是我在单独的文件中定义了所有的CSS。感谢您的所有帮助！

Answer 5

默认情况下，背景颜色为空，而不是#232323，因为.style.background仅查看#container的属性，而不查看css样式。

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

* {
  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>

背景颜色不会改变javascript

5 个答案: