javascript - 将相同的 CSS 属性应用于多个元素

Question

我有一系列元素（超过 20 个）都需要用户输入的颜色。使用 PHP + CSS 我最终得到这个输出：

#one, #two, #three, #four, #five, #etc { color: #222; }

它工作正常，但我现在需要在使用 jQuery/Javascript 加载 DOM 后编辑该颜色。同样，它将是用户输入，因此颜色可以是任何颜色。

有没有一种快速的方法可以一次将更改应用于所有元素？还是我必须执行以下操作？

$('#one').css('color', newColor );
$('#two').css('color', newColor );
.... etc

我希望有办法，因为就像我提到的，有超过 20 个元素需要这种改变。多谢你们

score 6 · Accepted Answer

你可以做：

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

但是，如果您为他们分配了一个共同的班级，那就更容易了。

$('.commonCls').css('color', newColor );

或者，如果说这些元素div（并且是唯一的元素）并且在容器内，container那么您就可以这样做。

 $('.container').find('div').css('color', newColor);

如果您事先知道颜色，则更好的是，只需为类名添加一个 cssrule 并将该类添加到这些元素中，这将比指定内联颜色（css()确实如此）更有助于级联。

$('.commonCls').addClass(newClass);

补充一点，如果你必须使用 id 并且你的 id 有一个共同的部分。例如：#one-Section, #two-Section etc..那么你可以使用属性以选择器（$）结尾，你也有包含（*）和以（^）开头的选择器。

$('[id$="Section"]').addClass(newClass); //or .css

score 0 · Accepted Answer

您可以使用类选择器。

$('.myclass').css('color', newColor );

or

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

2 回答 2