Question

我想通过点击按钮来更改页面中多个元素的颜色。我真的认为这会很好，但实现它有很多困难。我的代码如下改变了第一个元素 - 我知道这是因为我使用的是document.getElementById，但当我将其更改为document.getElementByClass时，它会停止工作。我尝试过内联样式和内部样式无济于事。请有人请说明如何做到这一点。我怀疑这是不可能的。谢谢。

<html>
<head>
<style>
#p1{color:#4d982b;}
</style>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementByClass("p1").style.color="#aaaaaa";
}
</script>
</head>
<body>

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

<input type="button" onclick="ChangeStyle()" value="Change style" />

</body>

Answer 1

这通常使用类而不是id来完成。

每页只能有一个ID。将您的代码更改为

<p class="myclass">Hello world!</p>
<p class="myclass">Hello world!</p>

然后使用javascript改变类颜色属性

这是一个有用的链接 How to getElementByClass instead of GetElementById with Javascript?

Answer 2

页面上的元素不能与id相同。 id对于单个元素而言是唯一的，因此当您致电getElementById("p1")时，它只会选择值id的第一个"p1"。

解决方案是使用类，或者进行2次getElementById次调用，使用2个不同的id。

Answer 3

ID必须是唯一的，因此请改用类名：

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

document.getElementsByClassName会产生一个数组。你必须遍历每个元素：

var list = document.getElementsByClassName("p1");
for (var i = 0; i < list.length; i++) {
    list[i].style.color="#aaaaaa";
}

Answer 4

我相信你正在考虑document.getElementsByClassName - 也许有人可以为我澄清，但我相信getElementById是获取元素的唯一单一回报。

因此，假设您正在尝试使用类“foo”...

获取所有元素

var elem = document.getElementsByClassName('foo')
for (var i = 0;i < elem.length; i++)
{
elem[i].style.color = '#aaaaaa'
}

那里可能存在语法错误，但我认为你会得到一般的想法〜

Answer 5

Getelementbyid方法仅适用于一个元素。尝试返回数组的getelementsbyid。

Javascript onclick更改多个元素的颜色

5 个答案: