0

以下工作正常：

document.getElementById("comment").style.background=color

我想添加几个 ID。以下不起作用：

document.getElementById("comment, name, url").style.background=color
document.querySelectorAll("comment, name, url").style.background=color

有人可以建议避免编写新函数来绑定所有 id 的代码吗？

编辑：这是我正在处理的代码：在标题上我有：

<script>
function setbg(color)
{
document.getElementById("comment").style.background=color
}
</script>

它很好地设计了以下文本区域：

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" required="" title="Mandatory field" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Add a comment here..." style="background-color: white; background-position: initial initial; background-repeat: initial initial;"></textarea></p>

但我希望它也适用于：

<input type="text" name="url" id="url" value="" size="22" tabindex="3" placeholder="WWW" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">

以及其他字段，如电子邮件、姓名等。

4

5 回答 5

2

创建和使用函数：

function colorElement(id, color){
    document.getElementById(id).style.backgroundColor = color;
}

colorElement('comment', 'red');
colorElement('name', 'green');
colorElement('url', 'blue');

JS 小提琴演示。

或者您可以使用元素数组id：

['comment', 'name', 'url'].forEach(function(a){
    document.getElementById(a).style.backgroundColor = 'red';
});

JS 小提琴演示。

或者，作为前一个的发展（允许您设置不同的颜色）：

[{
    "id": "comment",
    "color": "red"
}, {
    "id": "name",
    "color": "green"
}, {
    "id": "url",
    "color": "blue"
}].forEach(function (a) {
    document.getElementById(a.id).style.backgroundColor = a.color;
});

JS 小提琴演示。

于 2013-10-27T23:03:34.600 回答
2

既然你标记了 jQuery，这里有一个方法：

$("#comment, #name, #url").css("background-color",color);

这会抓取多个 id，并将样式应用于它们。

于 2013-10-27T23:03:58.230 回答
1

该getElementById方法只能获取一个元素，因此您需要在每个 id 上使用它：

var ids = ["comment", "name", "url"];
for (i in ids) {
  document.getElementById(ids[i]).style.background = color;
}

需要一个选择器，因此querySelectorAll您需要为每个 id 加上前缀#，然后您需要遍历结果，因为您一次只能在一个元素上设置一个属性：

var el = document.querySelectorAll("#comment, #name, #url");
for (i in el) {
  el[i].style.background = color;
}

演示：http: //jsfiddle.net/Guffa/B3J4a/

于 2013-10-27T23:09:51.067 回答
0

另一种方法是创建一个 ID 数组并遍历数组

var els=["comment", "name", "url"];

while (els.length){
  document.getElementById(els.pop()).style.backgroundColor = color;
}
于 2013-10-27T23:06:56.510 回答
0

您可以使用元素名称数组进行迭代，例如

for(var i=0; i<3; i++) 
{
   document.getElementById(array[i]).style.background=color;
}
于 2013-10-27T23:07:56.497 回答