使用getElementById一次指定两个操作

Specify 2 actions at once using getElementById

本文关键字：两个 操作 一次 getElementById 使用      更新时间：2023-09-26

假设我有一个按钮，我想在其中使用JavaScript来更改文本和文本颜色。我知道我可以用我粘贴在下面的代码来做这件事。对我来说，这似乎是多余的。有没有更好/更短的方法可以在不写两行的情况下实现这一点？也许我想在点击时对一个元素做两件以上的事情。。

<p id="p">What color is an egg?</p>
    <button id="b">click for answer</button>
    <script>
    document.getElementById("b").addEventListener("click", function(){document.getElementById("p").innerHTML= "white";});
    document.getElementById("b").addEventListener("click", function(){document.getElementById("p").style.color="white";});
    </script>

document.getElementById("b").addEventListener("click", function(){
     document.getElementById("p").innerHTML = "white";
     document.getElementById("p").style.color = "white";
});

或者更好。。。

document.getElementById("b").addEventListener("click", function(){
     var el = document.getElementById("p");
     el.innerHTML = "white";
     el.style.color = "white";
});

这不会起作用吗？

document.getElementById("b").addEventListener("click", function()
{document.getElementById("p").innerHTML= "white";
document.getElementById("p").style.color="white";});

像这样的东西可以在中工作

var events = [];
events.push(function(){document.getElementById("p").innerHTML= "white";});
events.push(function(){document.getElementById("p").style.color="white";});
document.getElementById("b").addEventListener("click", function(){
    for(var i = 0; i < events.length; i++) events[i]();
});

对于一般情况，您可以使用匿名函数

(function (node) {
   // code operating on node = document.getElementById("b")
   node.addEventListener("click", function(){
     (function (node_in) {
        // code operating on node_in = document.getElementById("p")
        node_in.innerHTML = "white";
        node_in.style.color = "white";
     })(document.getElementById("p"));
   });
})(document.getElementById("b"));
相关文章：