Change or swap the CSS of multiple HTML elements at once

batch-file, css, dom, javascript

Solution

The simplest way is to use CSS to do this, rather than changing the element classnames. Consider the following markup and 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>

You can simply use javascript to change the classname on the body from normal to alternate, to implement the color change on .foo elements. More rules will set colors for bar and baz.

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

Problem

I have about 100 `<span class="foo">`, 100 `<span class="bar">` and 100 `<span class="baz">` tags in my document. I need to implement the following operations in JavaScript: - Change the background all foos to red, all bars to green, all bazes to blue. - Change the background all foos to green, all bars to blue, all bazes to red. - Change the background all foos to blue, all bars to red, all bazes to green. I will call these operations about 1000 times altogether, so I'd like to avoid a solution which appends a `<style>` tag to the `<head>` each time I do an operation. Is there something simpler or faster or better than iterating over all `<span>` elements with `document.getElementsByTagName('span')`, and changing or appending to the `.className` DOM properties for each element?

Original source