Question

我拥有的是

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

在页面中有多个div，其id =＆＃34; post＆＃34;但是当我保存代码并试用它时，它只会改变页面上第一个div的背景，其中id =＆＃34; post＆＃34;而不是任何其他人。

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

对此有什么简单的解决方法吗？

Answer 1

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

所以请使用课程因此

getElementsByClassName()

迭代它们

Answer 2

当你想引用多个元素时，你应该使用class而不是id。

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

Answer 3

因为我已经finished my demo

了

您写道：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>

我如何使用document.getElementById（＆＃34; mydiv＆＃34;）编辑具有相同ID的多个div

3 个答案: