-1

出于某种原因，我无法设置 的变量document.getElementById("id").style.color，因为它显然是“null”。为什么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>

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

4

3 回答 3

3

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

但是，您可以这样做：

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

然后在任何地方：

elem.style.color = "somecolor";

顺便说一句，喜欢灯泡。

于 2013-10-28T22:45:01.893 回答
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存储一个原语。有关进一步说明，请参阅原始值与参考值。

于 2013-10-28T22:43:25.867 回答
2

现在看来，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 对象存储在持久变量中）。

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

  1. if (on)在这种情况下，效果和 一样好if (on == true)，但更简洁，并且是更常用的样式。
  2. else if (on == false)当一个简单else的方法对您的特定情况同样有效时，没有理由使用它。
  3. 我已经用一个简单地反转其 state 的单个赋值替换了两个单独的赋值 on on = !on;。
  4. 我已将 DOM 元素的获取移到if/else语句之外，因为两者都需要它。根据 DRY 的原则，您希望尽可能多地将通用代码组合到一个地方。
于 2013-10-28T22:43:58.077 回答