Как добавить больше, чем document.getElementById?

Question

работает отлично следующее:

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

Я хотел бы добавить несколько идентификаторов. Ниже не работают:

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

Может кто-то предложить, что код избегать, чтобы написать новую функцию, чтобы связать все идентификаторы?

EDIT: Это код, который я сейчас работаю: В заголовке у меня есть:

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

И это стили также следующие 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> 

Но я хотел бы его также следует использовать для:

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

Как и в других областях, как электронная почта, имя и т.д.

Answer 1

Создание и использование, функции:

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

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

JS Fiddle demo.

Или вы можете использовать массив элементов id с:

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

JS Fiddle demo.

Или, как развитие предыдущего (что позволяет устанавливать различные цвета):

[{ 
    "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

Поскольку вы помечен JQuery, вот так:

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

Это захватывает несколько идентификаторов, и применяет стиль к ним.

Answer 3

Другой подход заключается в создании массива идентификаторов и цикл по массиву

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

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

Answer 4

Либо вы можете перебирать с массивом имени элемента, как

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

Answer 5

getElementById метод может получить только один элемент, так вам необходимо будет использовать его для каждого идентификатора:

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

querySelectorAll занимает селектор, так что вам нужно будет префикс каждого идентификатора с #, то вам нужно Переберите результат, как вы можете только установить свойство на одном элементе в то время:

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

Демо: http://jsfiddle.net/Guffa/B3J4a/