如何使用document.getElementById（“ mydiv”）编辑具有相同ID的多个div

Question

我有的是

<script>
function myFunction()
{
document.getElementById("post").style.backgroundColor="#ECF6A4";
}
</script>
<button onclick="myFunction()">Change Post Color</button>

在页面中，有多个带有id =“ post”的div，但是当我保存代码并尝试使用它时，它仅更改了带有id =“ post”的页面上第一个div的背景，而没有其他任何背景。

我没有运气就尝试了getElementsById，这就是我能想到的。

有任何简单的解决方案吗？

Answer 1

同一页面上具有相同ID的多个div无效标记，重复ID无效。

因此请使用类pls，因此

getElementsByClassName()

遍历他们

Answer 2

当您要引用多个元素时，应使用class而不是id。

document.getElementsByClassName('class').style.backgroundColor = "#ECF6A4"

Answer 3

因为我已经完成了演示

您写道： trying getElementsByClassName() but nothing changes ，原因是getElementsByClassName()返回了一个数组，您必须访问此数组的每个元素，然后才能使用.style.backgroundColor="#ECF6A4";

function myFunction()
{
    var listItems = document.getElementsByClassName("even");
    for (var i = 0; i < listItems.length; i++)
    {
        listItems[i].style.backgroundColor="#ECF6A4"; // element i of array
    }
}

和HTML

<ul>
  <li class="odd">1</li>
  <li class="even">2</li>
  <li class="odd">3</li>
  <li class="even">4</li>
  <li class="odd">5</li>
  <li class="even">6</li>      
</ul>
<button onclick="myFunction()">Change Color for even</button>