Question

出于某种原因，我无法设置document.getElementById("id").style.color的变量，因为它显然是“空”。为什么每次需要设置颜色时都必须调用document.getElementById("id").style.color？

（我没有灯泡的照片，所以我决定即兴发挥）

<html>
<head>
    <title>Hello</title>
</head>
<body>
    <pre id="light" onclick="toggleLight()">
      ____
    / __   \
   / //     \
  / ||       \
 |            |
 |     |O     |
  \    O|    /
   \   ||   /
    \      /
     |~~~~|
     |____|
       **
    </pre>
    <script>
        var on = false;
        var bulb = document.getElementById("light").style.color;
        function toggleLight(){
            if(on==true){
                bulb = "black";
                on=false
            } else if(on==false) {
                bulb = "yellow";
                on=true
            }
        }
    </script>
</body>

编辑：这似乎不太清楚。我编辑了代码，现在你可以尝试一下。你会明白我的意思。

Answer 1

您无法将颜色保存到变量然后更改它的原因是因为您只会更改变量。

但你可以这样做：

var elem=document. getElementById("light");

然后在任何地方：

elem.style.color = "somecolor";

顺便爱上了灯泡。

Answer 2

您可以设置var my_style = document.getElementById("light").style，然后设置my_style.color = "black"。

您不能做的是设置var color = document.getElementById("light").style.color，然后设置color = "black"，因为这只会更改color变量的值，而不会更改实际元素。

这是因为my_style存储引用，而color存储原语。有关详细说明，请参阅Primitive value vs Reference value。

Answer 3

现在看起来OP已经编辑了他们的问题，将代码更改为完全不同于原来的代码。下面的答案适用于他们的代码最初的代码，尽管我的第一个代码示例也解决了他们的问题。

你的脚本似乎对我们很多人都很好（参见你问题评论中引用的jsFiddle链接）。

关于您的另一个问题：document.getElementById("light")获取包含灯光表示的DOM元素。您可以获取该DOM元素一次并将其存储在持久变量中，这样您每次都可以使用该变量，或者您可以在每次需要时简单地获取它。

一般的样式指南是你不希望持久地将DOM对象存储在持久变量中，除非你有充分的理由这样做，因为在动态页面中创建和销毁对象或在大型复杂项目中存储持久脚本变量中的DOM引用有时会导致内存泄漏或不一致状态。如果您根据需要获取DOM对象，则永远不会出现不一致的状态或泄漏。

但是，有更有效的方法来编写你已经完成的仍然根据需要请求DOM对象的内容，例如：

<script>
    var on = false;
    function toggleLight() {
        var bulb = document.getElementById("light");
        if (on) {
            bulb.style.color = "black";
        } else {
            bulb.style.color = "yellow";
        }
        on = !on;
    }
</script>

这种样式只会获取一次DOM对象，但它会将这个DOM对象存储在一个你通常想要避免的全局变量中，除非你有充分的理由这样做：

<script>
    var on = false;
    var bulb = document.getElementById("light");

    function toggleLight() {
        if (on) {
            bulb.style.color = "black";
        } else {
            bulb.style.color = "yellow";
        }
        on = !on;
    }
</script>

第二个脚本与第一个脚本有轻微的性能差异（更多的启动执行时间，点击时的执行时间更少），但由于这是用户触发的事件，因此无法注意到差异因此，在单击时的执行时间中，建议使用第一个选项的清洁设计（不在持久变量中存储DOM对象）。

仅供参考，请注意我还缩短了部分代码。

if (on)与if (on == true)一样有效，但更简洁，是一种更常用的风格。
当简单的else if (on == false)对您的具体案例起作用时，没有理由使用else。
我已将两个单独的作业替换为on，只需将其状态on = !on;转换为单个作业。
我将DOM元素的提取移到if/else语句之外，因为两者都需要它。根据DRY的原则，您希望尽可能经常地将公共代码组合到一个位置。

Javascript - 为什么我不能将style.color设置为变量？

3 个答案: