javascript - 将 style.background 设置为 var 不起作用

Question

我修改了这个工作 Javascript code通过将 style.background 设置为 var "x"并且它不再切换。问题出在哪里？

<script>
var myVar = setInterval(setColor, 300);
 
function setColor() {
/* This commented-out code works.
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
  */
  var x = document.body.style.backgroundColor;  // not working
  x = x == "yellow" ? "pink" : "yellow";
}
</script>

Answer 1

那是因为在原始代码中:

function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

x 是 document.body 的引用，但是，在您的代码中，当您这样做时:

x = x == "yellow" ? "pink" : "yellow";

x 不再等于 document.body 的引用，现在它是一个字符串，粉红色或黄色。所以，x不会改变html，因为它只是一个字符串变量。

如果您希望代码正常工作，您需要将此代码添加到 x 声明后面。

document.body.style.backgroundColor = x