ansaurus

Question

Change or swap the CSS of multiple HTML elements at once

Answer 1

+2 A:

You could give the body of your document a class to determine which configuration of colours should be used and then simply style the spans accordingly.

eg:

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

If you're then changing the styles on the same page after some period of time, a small piece of JS to change the class of the body will be all that's required.

Jamie Dixon 2010-02-21 15:08:21

Answer 2

+7 A:

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

David Caunt 2010-02-21 15:10:53

ansaurus

tags:

views:

answers:

Change or swap the CSS of multiple HTML elements at once

related questions