Javascript onclick更改多個元素的顏色
[英]Javascript onclick change color of more than one element
問題描述
我想通過單擊一個按鈕來更改頁面中多個元素的顏色。 我真的以為這會很好，但是我在實現它上有很多困難。 我的代碼如下更改了第一個元素-我知道這是因為我正在使用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>
5 個解決方案
解決方案1
2 2012-02-24 16:35:25
通常使用類而不是ID來完成此操作。
每頁只能有一個ID。 將您的代碼更改為
<p class="myclass">Hello world!</p>
<p class="myclass">Hello world!</p>
然后使用javascript更改類的顏色屬性
這是一個鏈接，該鏈接將幫助如何使用Javascript而不是GetElementById來getElementByClass？
解決方案2
1 2012-02-24 16:37:29
您的頁面上不能有具有相同id元素。 id是對單個元素唯一的，因此當您調用getElementById("p1") ，它將僅選擇值為"p1"的第一個id 。
解決方案是使用類，或者使用2個不同的id進行2個getElementById調用。
解決方案3
0 2012-02-24 16:38:13
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";
}
解決方案4
0 已采納 2012-02-24 16:38:30
我相信您正在考慮document.getElementsByClassName-也許有人可以為我澄清一下，但我相信getElementById是獲取元素的唯一唯一回報。
因此，可以說您正在嘗試使用“ foo”類獲取所有元素...
var elem = document.getElementsByClassName('foo')
for (var i = 0;i < elem.length; i++)
{
elem[i].style.color = '#aaaaaa'
}
那里可能有語法錯誤，但我認為您已經有了大致的認識〜
解決方案5
0 2012-02-24 16:41:28
Getelementbyid方法僅適用於一個元素。 嘗試getelementsbyid返回一個數組。
如何使用onclick javascript函數添加多個日歷
[英]How to add more than one calendar using onclick javascript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.