how to change a css class style through javascript ?

Question

according to the book that I am reading, it is better to change a css, by class when you are using javascript for changing css. but how? can someone give a sample snippet for this ? thanks in advance

Answer 1

use the className property:

document.getElementById('your_element_s_id').className = 'cssClass';

Answer 2

document.getElementById("my").className = 'myclass';

Answer 3

Suppose you have:

<div id="mydiv" class="oldclass">text</div>

and the following styles:

.oldclass { color: blue }
.newclass { background-color: yellow }

You can change the class on mydiv in javascript like this:

document.getElementById('mydiv').className = 'newclass';

After the DOM manipulation you will be left with:

<div id="mydiv" class="newclass">text</div>

If you want to add a new css class without removing the old one, you can append to it:

document.getElementById('mydiv').className += ' newClass';

This will result in:

<div id="mydiv" class="oldclass newclass">text</div>

Answer 4

You may also be interested in modifying it using jQuery: http://api.jquery.com/category/css/

Answer 5

I'd highly recommend jQuery. It then becomes as simple as:

$('#mydiv').addClass('newclass');

You don't have to worry about removing the old class then as addClass() will only append to it. You also have removeClass();

The other advantage over the getElementById() method is you can apply it to multiple elements at the same time with a single line of code.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

The first example will add the class to all DIV elements on the page. The second example will add the new class to all elements that currently have the old class.