Javascript 一次更改或交换多个HTML元素的CSS_Javascript_Css_Dom_Batch File

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

javascript css dom batch-file

Javascript 一次更改或交换多个HTML元素的CSS,javascript,css,dom,batch-file,Javascript,Css,Dom,Batch File,我的文档中有大约100个、100个和100个标签。我需要在JavaScript中实现以下操作：将背景所有foos更改为红色，将所有条更改为绿色，将所有baze更改为蓝色将背景所有foos更改为绿色，将所有条更改为蓝色，将所有baze更改为红色将背景所有foos更改为蓝色，将所有条更改为红色，将所有baze更改为绿色我将总共调用这些操作大约1000次，因此我希望避免在每次执行操作时在中添加标记的解决方案是否有比使用document.getElementsByTagName（'span

我的文档中有大约100个

、100个

和100个

标签。我需要在JavaScript中实现以下操作：

将背景所有foos更改为红色，将所有条更改为绿色，将所有baze更改为蓝色
将背景所有foos更改为绿色，将所有条更改为蓝色，将所有baze更改为红色
将背景所有foos更改为蓝色，将所有条更改为红色，将所有baze更改为绿色

我将总共调用这些操作大约1000次，因此我希望避免在每次执行操作时在

中添加

标记的解决方案

是否有比使用

document.getElementsByTagName（'span'）

迭代所有

元素更简单、更快或更好的方法，更改或附加到每个元素的

.className

DOM属性？

您可以为文档主体提供一个类，以确定应该使用哪种颜色配置，然后简单地对跨度进行相应的样式设置

例如：

如果您在一段时间后要更改同一页面上的样式，则只需要一小段JS来更改主体的类。

最简单的方法是使用CSS来完成此操作，而不是更改元素的类名。考虑下面的标记和CSS.

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

<body class="normal">
    <span class="foo">hello</span>
    <span class="bar">hello</span>
    <span class="baz">hello</span>
</body>

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

<body class="normal">
    <span class="foo">hello</span>
    <span class="bar">hello</span>
    <span class="baz">hello</span>
</body>

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