Question

我想使用getElementById（＆＃34; xxx＆＃34;）。style.color =＆＃34; xxx＆＃34;。有了这个我想改变一些css值。但问题是当我使用它并测试所有相同的id但它不会影响所有id和效果只有第一个。

示例代码如下：

<html>
<body>
<div id = "test">Test</div>
<div id = "test">Test</div>
<div id = "test">Test</div>
<div id = "test">Test</div>
<script>
     document.getElementById("test").style.color = "blue"
</script>
</body>
</html>

如何将所有4个测试更改为蓝色 AnyIdea请感谢

Answer 1

HTML文档中的ID 必须是唯一的。写valid HTML。

表示多个相关元素：使用类。

然后，您可以使用getElementsByClassName或querySelectorAll来获取类似数组的对象，您可以使用for循环依次访问每个元素。

＆＃13;

var elements = document.querySelectorAll(".test");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "blue";
}

＆＃13;

<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>

＆＃13;

或者，使用后代组合子编写样式表，并在包含元素上切换类。

＆＃13;

document.getElementById("container").classList.add("foo");

＆＃13;

.test { color: black; }
.foo .test { color: blue; }

＆＃13;

<div id="container">

  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>

</div>

＆＃13;

Answer 2

如前所述，ID必须是唯一的。如果你想给多个DOM元素使用相同的样式，只需使用'class'。你可以试试这个：

<html>

<body>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <script>
    var divList = document.getElementsByClassName("test");
    for (var i = 0; i < divList.length; i++) {
      divList[i].style.color = "red";
    }
  </script>
</body>

</html>

使用javascript更改样式。

Answer 3

您的代码存在两个问题：

id必须是唯一的，所以你应该使用eg。 class而不是
您应该遍历所选的不同元素

这是我纠正这两个问题的首选方法：

<html>
  <body>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <script>
        Array.prototype.slice.call(
            document.getElementsByClassName("test")
        ).forEach(function(element) {
            element.style.color = "blue"
        });
    </script>
  </body>
</html>

另见this Fiddle。

Answer 4

适用于jQuery解决方案

您不能使用相同的ID对所有元素执行相同的操作

您可以使用类名称并使用jquery添加样式，如

 $(".className").css("color","blue");

的document.getElementById（＆＃34; XXX＆＃34）。式

4 个答案: