javascript - 如何一键将 CSS 样式应用到具有相同 ID 的所有元素？

Question

我的想法是创建一个按钮来隐藏/显示所有隐藏文本(通过以黑色突出显示文本来隐藏，通过使文本的背景颜色透明来显示)。但代码(如下所示)仅适用于具有给定 ID(“p2”)的第一个元素。

Javascript:

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {  
        test.value = "Open Spoiler"; 
        document.getElementById("p2").style.backgroundColor="black";  
    }
    else  
    {  
        test.value = "Hide Spoiler"; 
        document.getElementById("p2").style.color="black";
        document.getElementById("p2").style.backgroundColor="transparent";  
    }
}

HTML:

<input onclick="change()" type="button" value="Open Curtain" id="button1"></input>
<br>
<span id="p2">Hidden text</span> Test for more <span id="p2">Hidden text</span> test again. <span id="p2">Hidden text</span>

如何让所有具有相似 ID 的元素仅使用 1 个按钮来更改其 CSS 样式？谢谢。

Answer 1

您的代码每次只更新一个元素，因为 getElementById 只会返回一个元素(因为，正如我们所说，id 应该是独特的)。如果您需要将多个元素标记为相关，请改用class。 Here is a working example using class ，JavaScript:

function change() {
    var test = document.getElementById("button1");
    var els = document.getElementsByClassName("p2");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.backgroundColor = "black";
        }
    } else {
        test.value = "Hide Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.color = "black";
            els[i].style.backgroundColor = "transparent";
        }
    }
}

HTML:

<input onclick="change()" type="button" value="Hide Spoiler" id="button1"></input>
<br>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

如果您需要它在对于 getElementsByClassName 来说太旧的浏览器中工作，请尝试使用 jQuery 。它使这类事情变得容易得多