將 style.background 設置為 var 不起作用

Question

我通過將 style.background 設置為 var "x" 修改了這個工作Javascript 代碼，它不再切換。 問題出在哪兒？

<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

您將值分配給變量“x”，而不是document.body.style.backgroundColor ，不要將其存儲在變量中。

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

Answer 2

那是因為在原始代碼中：

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