我有大约 100 个 <span class="foo"> , 100 <span class="bar">和 100 <span class="baz">我文档中的标签。我需要在 JavaScript 中实现以下操作:
- 将背景所有 foos 更改为红色，所有条形更改为绿色，所有 bazes 更改为蓝色。
- 将背景所有 foos 更改为绿色，所有条形更改为蓝色，所有 bazes 更改为红色。
- 将背景所有 foos 更改为蓝色，所有条形更改为红色，所有 bazes 更改为绿色。
我将总共调用这些操作大约 1000 次，因此我想避免使用附加 <style> 的解决方案标记到 <head>每次做手术。
有什么比遍历所有 <span> 更简单、更快或更好的方法吗？带有 document.getElementsByTagName('span') 的元素，并更改或附加到 .className每个元素的 DOM 属性？
最佳答案
最简单的方法是使用 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 将 body 上的类名从 normal 更改为 alternate，以实现 .foo 元素的颜色更改。更多规则将为 bar 和 baz 设置颜色。
document.getElementsByTagName('body')[0].className = 'alternate';
关于javascript - 一次更改或交换多个 HTML 元素的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2306279/