Javascript onclick改变多个元素的颜色答案

【问题标题】：Javascript onclick change color of more than one elementJavascript onclick改变多个元素的颜色
【发布时间】：2012-03-15 02:54:12
【问题描述】：

我想通过单击一个按钮来更改页面中多个元素的颜色。我真的认为这将是非常但我很难实现它。我的代码如下更改了第一个元素 - 我知道这是因为我正在使用 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>

【问题讨论】：

标签： javascript css colors onclick styles

【解决方案1】：

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";
}

【讨论】：

对不起 - 错字。我有“list[i].style.style”。固定。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

假设您正在尝试获取所有具有“foo”类的元素...

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

上面可能有语法错误，但我想你明白了~

【讨论】：

非常感谢您帮我解决这个问题。我已经到了拉头发的阶段。快速提问，有什么方法可以与 IE 一起工作？还是我应该接受它不受支持？
这是因为您没有在顶部声明 DOC TYPE。 :] 澄清一下，如果没有声明文档类型，Internet Explorer 默认为“怪癖模式”——某些通常可用的功能在怪癖模式下不可用。 w3schools.com/html5/tag_doctype.asp

【解决方案4】：

页面上的元素不能具有相同的id。 id 对单个元素是唯一的，因此当您调用 getElementById("p1") 时，它只会选择值为 "p1" 的第一个 id。

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

【讨论】：

啊，我知道这会是个问题，但是当我将 id 更改为 class 时，没有任何效果。我究竟做错了什么？
Hello world!

Hello world!
查看 Olivier 提供的链接。 stackoverflow.com/questions/1933602/… 您需要使用类 "p1" 循环遍历每个元素
正确，所以她需要做的是getElementsByClassName()，这里提到：stackoverflow.com/questions/7480496/…
这是一个有效的小提琴示例。注意 [1] 以更改第二个元素。因此，您想使用它们的长度循环遍历这些项目。 jsfiddle.net/pJXh9
谢谢一百万，我的一半问题是它不能在 IE 上工作，但我只需要它在 android 上工作，我很高兴。

【解决方案5】：

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

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

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

然后用javascript修改类的颜色属性

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

【讨论】：

非常感谢您的评论，但我知道但当我这样做时 document.getElementByClass("p1").style.color="#aaaaaa";什么都没有发生。
请检查我刚刚添加的链接，它应该可以解决您的问题。
这确实应该被标记为答案。如果您希望它在 IE 中工作，答案在上面的链接中，这是第一个答案。您需要创建getElementByClassName 方法的自定义实现。
感谢您的评论 ;-)