如何添加不仅仅是document.getElementById？

Question

the following is working fine:

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

I'd like to add several IDs. The following do not work:

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

Can someone suggest what code avoiding to write a new function to bind all the ids?

EDIT: This is the code I am working on: On the header I have:

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

And it styles well the following textarea:

<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>

But I'd like it to work also for:

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

As well as per other fields, like email, name, etc.

Answer 1

Create, and use, a function:

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

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

JS Fiddle demo .

Or you can use an array of element id s:

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

JS Fiddle demo .

Or, as a development of the previous (which allows you to set different colours):

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

JS Fiddle demo .

Answer 2

Since you tagged jQuery, here's a way:

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

This grabs multiple ids, and applies the style to them.

Answer 3

The getElementById method can only get one element, so you would need to use it on each id:

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

The querySelectorAll takes a selector, so you would need to prefix each id with # , then you need to loop through the result as you can only set a property on one element at a time:

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

Demo: http://jsfiddle.net/Guffa/B3J4a/

Answer 4

Another approach is create an array of ID's and loop over array

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

while (els.length){
  document.getElementById(els.pop()).style.backgroundColor = color;
}

Answer 5

Either you can iterate with array of element name like

for(var i=0; i<3; i++) 
{
   document.getElementById(array[i]).style.background=color;
}