DEMO

Question

我正在使用这样的代码：

document.getElementById('one').style.color = 'red';
document.getElementById('two').style.backgroundColor= 'blue';
.......
document.getElementById('another').style.fontSize= '20px';

是否有一个通用方法为多个id元素设置样式，如下面的内容（如jQuery）？

document.getElementById('one').add('two').add('three').style.color = 'red';

或者，我该怎么做？

Answer 1

您无法在javascript中选择多个ID。你可以通过给出相同的类名来做到这一点。

[ 'one', 'two', 'three' ].forEach(function( id ) {

    document.getElementById( id ).style.color = "red";

});

DEMO

Answer 2

您可以使用jQuery

$("input").css('color', 'red');

您还可以将类添加到要更改的目标dom元素，而不是选择所有输入元素。例如：

<input id="one" class="whatever" ... etc>
<input id="two" class="whatever" ... etc>
<input id="three" class="whatever" ... etc>

用这个javascript来改变它们

$(".whatever").css('color', 'red');

有关w3schools或jQuery API documentation

选择器的更多详细信息

Answer 3

通过使用CSS来实现。为每个元素设置相同的类：

<div id="one" class="class1">text</div>
<div id="two" class="class1">text</div>
<div id="three" class="class1">text</div>

CSS：

.class1 { color: blue }

然后使用JQuery在Javascript中更改它，如：

$('.class1').css({"color":"blue"});

它更有效，更易理解。

如何为多个id元素javascript设置样式

3 个答案:

DEMO