Question

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

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

我会将这些操作完全调用大约1000次，因此我想避免使用每次执行操作时向<style>添加<head>标记的解决方案。

是否有比使用<span>迭代所有document.getElementsByTagName('span')元素更简单，更快或更好的内容，以及更改或附加每个元素的.className DOM属性？

Answer 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';

Answer 2

您可以为文档正文提供一个类来确定应该使用哪种颜色配置，然后相应地设置跨度样式。

例如：

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

如果你在一段时间之后改变同一页面上的样式，那么改变身体类别的一小部分JS将是所有必需的。

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

2 个答案: