1. 首页
  2. 问题列表
  3. 有可能通过变量设置属性的背景吗？
提问者：小点点

有可能通过变量设置属性的背景吗？


我对改变元素的背景色感兴趣，方法是用变量访问一次背景色，然后通过变量将它设置为另一个背景色。

这是我的“before”代码中的相关部分（工作正常）:

        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”，它会更整洁，因此我尝试将代码更改为（我用**标记了相关的更改）:“t_cur.style.BackgroundColor”，“t_cur.style.BackgroundColor”，“t_curr.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";**
          }

让我感到奇怪的是，当我这么做的时候，它确实执行了这部分:

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

这是应该的。

难道不能通过变量设置属性的背景色吗？
在获取或设置属性背景时，在使用变量的方式和方式上是否存在差异？

/////////////////////// 如果你觉得有什么不太清楚或不清楚的地方，请告诉我，我很乐意学习和改进。


共2个答案

匿名用户

使用下面的代码时，

t_bgClr = t_cur.style.backgroundColor;

t_bgClr存储字符串（例如，White“）。这就是为什么您能够使用t_bgClr存储字符串（例如，White”）的原因。 即如果(t_bgClr==“white”）。。。条件有效。 t_bgClr deos不包含对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;
}

匿名用户

你可以做这样的事情:

       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";
       }

原因是，这里的sharmed只是t_cur.style.BackgroundColor的值，您可以随意更改这个变量中的值，它不会影响DOM。

null

 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>

相关问题