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

【问题标题】：Change or swap the CSS of multiple HTML elements at once一次更改或交换多个 HTML 元素的 CSS
【发布时间】：2011-01-19 08:40:31
【问题描述】：

我的文档中有大约 100 个<span class="foo">、100 个<span class="bar"> 和100 个<span class="baz"> 标签。我需要在 JavaScript 中实现以下操作：

将所有 foos 的背景更改为红色，将所有条形图更改为绿色，将所有 bazes 更改为蓝色。
将所有 foos 的背景更改为绿色，将所有条形更改为蓝色，将所有 bazes 更改为红色。
将所有 foos 的背景更改为蓝色，将所有条形更改为红色，将所有 bazes 更改为绿色。

我将总共调用这些操作大约 1000 次，因此我想避免每次执行操作时都将 <style> 标记附加到 <head> 的解决方案。

有什么比使用document.getElementsByTagName('span') 迭代所有<span> 元素并更改或附加到每个元素的.className DOM 属性更简单、更快或更好的方法吗？

【问题讨论】：

标签： javascript css dom batch-file

【解决方案1】：

最简单的方法是使用 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>

您可以简单地使用 javascript 将主体上的类名从正常更改为备用，以实现 .foo 元素的颜色更改。更多规则将为 bar 和 baz 设置颜色。

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

【讨论】：

【解决方案2】：

你可以给你的文档正文一个类来确定应该使用哪种颜色配置，然后简单地设置相应的跨度样式。

例如：

.configTypeOne span.foo{...}
.configTypeTwo span.foo{...}

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

【讨论】：