是否可以通过变量设置属性的背景？

Question

我有兴趣通过使用变量访问一次背景色，然后通过变量将其设置为另一种背景色来更改元素的背景色。

这是我的“之前”代码中的相关部分（工作正常）：

        function switchToGreen(index) {
          var allGreen = true;
          var t = document.getElementsByTagName("td");
          var t_cur = t[index];

          if (t_cur.style.backgroundColor == "white") {
              t_cur.innerHTML = "1";
              t_cur.style.backgroundColor = "lightGreen";
           }

          else {
              t_cur.innerHTML = "- 1";
              t_cur.style.backgroundColor = "white";
           }
            .
            .
            .
         }

尽管此代码可能会正常工作，但我认为如果在初始化变量时可以一次编写此“ t_cur.style.backgroundColor”，它会变得更加整洁，因此我尝试将代码更改为（带有**的相关更改）：

          var allGreen = true;
          var t = document.getElementsByTagName("td");
          **var t_bgClr = t_cur.style.backgroundColor;**
          var t_cur = t[index];

          if (**t_bgClr == "white"**) {
              t_cur.innerHTML = "1";
              **t_bgClr = "lightGreen";**
          }

对我来说很奇怪，我很乐意解释为什么发生这种情况，因为当我这样做时，它确实执行了这一部分：

t_cur.innerHTML =“ 1”

这告诉我它确实输入了我的'if'语句，并且确实t_bgClr是白色，但是，它不会执行这一部分：

t_bgClr =“ lightGreen”

应有。

是否无法通过变量设置属性的背景色？想要获取或设置属性背景时，应如何使用变量有何区别？

///////////////////////////////////////////////// /////////////////////////////////////////// 值得一提的免责声明，因为在我的另一篇文章中，我已经对我的英语进行了更正-英语不是我的主要语言，但是我尽我所能检查语法并尽可能正确地写出我的问题。如果您觉得有什么还不能完全解释或不清楚，请告诉我，我将很高兴学习和改进。

Answer 1

使用以下代码时，

t_bgClr = t_cur.style.backgroundColor;

t_bgClr存储字符串（例如，白色”。这就是为什么您能够t_bgClr存储字符串（例如，白色”）的原因。即if（t_bgClr ==“ white”）...条件起作用。 t_bgClr 
deos not包含对t_cur.style的backgroundColor属性的引用。 
因此t_bgClr =“ lightGreen”更改了变量的字符串值，而不是backgroundColor属性。如果您想缩短代码，请尝试以下代码：
var allGreen = true;
var t = document.getElementsByTagName("td");
var t_bgClr = t_cur.style.backgroundColor;
var t_curStyle = t_cur.style;
var t_cur = t[index];    
if (t_bgClr == "white"**) {
    t_cur.innerHTML = "1";
    t_bgClr = "lightGreen";
    t_curStyle.backgroundColor=t_bgClr;
}

Answer 2

嗯，您可以很好地执行以下操作：

       var shortened = t_cur.style;
       if (shortened.backgroundColor == "white") {
           t_cur.innerHTML = "1";
           shortened.backgroundColor = "lightGreen";
       }

      else {
          t_cur.innerHTML = "- 1";
          shortened.backgroundColor = "white";
       }
       ....

但是，以下操作无效：
var shortened = t_cur.style.backgroundColor;
       if (shortened == "white") {
           t_cur.innerHTML = "1";
           shortened = "lightGreen";
       }

原因是，这里shortened只是t_cur.style.backgroundColor的值，您可以在此[[variable中更改此值，但是您希望这样做，它不会影响DOM。
 
 var t = document.getElementById("myId");

 var common = t.style;
 common.background = 'red';
 
 common.background = 'blue';
<div id ="myId" style="width:50px;height:50px;border:1px solid">
sfsf
</div>