如何使用一个按钮将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 。 这是一个使用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 。 它使这种事情变得更容易

Answer 2

使用class而不是id 。 然后使用document.getElementsByClassName("p2") ，它将返回匹配元素的数组并循环遍历它们。

Answer 3

id是唯一的，所以有多个实例[ http://www.tizag.com/cssT/cssid.php]是无效的 - 但是你可以使用一个类然后用$（“。className”）选择所有实例（假设jQuery）。 这个答案如何使用Javascript getElementByClass而不是GetElementById？ 包含很多有用的指针

Answer 4

正如其他人所说，不要在一个页面上多次使用相同的id。 而是使用类名或数据属性。 因为你用jQuery标记了你的问题：

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {
        test.value = "Open Spoiler"; 
        $('.className').css('background-color','transparent');
    }
    else 
    {
        test.value = "Hide Spoiler"; 
        $('.className').css('background-color','transparent');
        $('.className').css('color','black');
    }
}

如果你打算使用jQuery，我还建议使用按钮的click事件，如：

$('#button1').click(function() {
  ...
});

Answer 5

我反对相同的ID概念...但尝试下面的问题将是你的问题的答案....

小提琴示例： http ： //jsfiddle.net/RYh7U/65/

CSS

.mask
{
color : red;
}

Javascript：

function change()
{
 var elements = document.getElementById("p2").parentNode.getElementsByTagName("span");
    for(var i=0; i<elements.length; i++)
      elements[i].className = "mask";
}

Answer 6

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

那么jquery：

function change() {
    var test = document.getElementById("button1");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        $('.p2').css('background-color','black')

    }
    else {
        test.value = "Hide Spoiler";
        $('.p2').css('background-color', 'transparent')

    }
}

我测试过了