时间戳

首页 > 解决方案 > 是否可以通过变量设置属性的背景？

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

问题描述

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

这是我的“之前”代码中的相关部分（效果很好）：

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 = "浅绿色"

正如它应该。

不能通过变量设置属性的背景颜色吗？
在想要获取或设置属性背景时，我应该如何使用变量有什么不同吗？

///////////////////////////////////////// ////////////////////////////////////////////////////////// expearmer
值得一提，因为在我的其他帖子中，我的英语得到了纠正——英语不是我的主要语言，但我尽我所能检查我的语法并尽可能正确地写出我的问题。如果您觉得有什么不能解释或不清楚的地方，请告诉我，我很乐意学习和改进。

标签： javascript

解决方案

好吧，你可以很好地做这样的事情：

       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，你可以随意改变这个变量中的这个值，它不会影响 DOM。

object让我们用and来模拟一下string。

   var a = "foo", b = a; 
   b = "bar" // if you do this 'a' will still remain "foo";

   var x = {"foo": "bar"}
   var y = x;
   y.foo= "changed bar";
   console.log(x.foo) //it will be "changed bar" now

这也是你的情况。t_cur.style是一个对象，而t_cur.style.backgroundColor只是一个string. 如果您不断更改字符串的值，则不会影响原始字符串。另一方面，如果您更改从另一个对象派生的对象的属性，它将影响原始对象。

 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>

推荐阅读