javascript – 一次更改或交换多个HTML元素的CSS

我有大约100< span class =“foo”>,100< span class =“bar”>和100< span class =“baz”>我的文档中的标签.我需要在JavaScript中实现以下操作：

>将所有背景的背景更改为红色,将所有条形图更改为绿色,将所有条形图更改为蓝色.
>将所有foos的背景更改为绿色,将所有条形图更改为蓝色,将所有条形图更改为红色.
>将所有背景的背景更改为蓝色,将所有条形图更改为红色,将所有条形图更改为绿色.

我将这些操作完全称为1000次,所以我想避免使用附加< style>的解决方案.标记到< head>每次我做手术.

是否有比迭代所有< span>更简单,更快或更好的东西元素与document.getElementsByTagName(‘span’),以及更改或附加到每个元素的.className DOM属性？

最佳答案

最简单的方法是使用CSS来执行此操作,而不是更改元素类名.考虑以下标记和CSS.

.normal .foo{
    background-color: #0f0;
}
.alternate .foo {
    background-color: #f00;
}

normal">
    

您可以简单地使用javascript将正文上的类名从正常更改为替换,以在.foo元素上实现颜色更改.更多规则将为bar和baz设置颜色.

document.getElementsByTagName('body')[0].className = 'alternate';