If you are a JavaScript newbie this post helps you to implement a simple code to change the class for HTML elements.
Some readers asked to me how to change the class attribute of an HTML element using javascript. You can use setAttribute() in this way:
document.getElementById("idElement").setAttribute("class", "className");
...where className is the name of class you want to assign to your html element with ID equal to "idElement".
An example
Image you have a <div> element with a link which call a javascript function changeClass() to change the <div> class:
<div id="myElement">Welcome on my site!</div>
<a href="javascript:changeClass()">Change Class</a>
<script language="javascript">
function changeClass(){
document.getElementById("idElement").setAttribute("class", "myClass");
}
</script>
<a href="javascript:changeClass()">Change Class</a>
<script language="javascript">
function changeClass(){
document.getElementById("idElement").setAttribute("class", "myClass");
}
</script>
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
I think that a simpler way may be to use
document.getElementById("blah").className = "mycssclass"
or does this not work with all A-grade browsers?
Hi Eric, it works on Firefox and Safari on mac. I don't tryied on other browsers :)
This works great in FF2, but if you're shooting for cross-browser compatibility (mainly speaking of IE6), save your time and use the element.className ="whatever"; method. It works in all widely-used browsers (to the best of my knowledge).
Using the setAttribute method, IE6 will for some reason apply the classname, but the CSS won't take effect. I really have no clue why...
This will not work on any version of Internet Explorer (IE) (Browser Bug 242)
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
This is actually just ONE of DOZENS of properties that you can not set correctly in IE using the preferred DOM methods.
You can change the class in IE.
Do this:
obj.setAttribute('className', 'TabOn')
Set obj to = your object and
replace TabOn with your class name.
For IE and Mozilla we have two different methods like one is "class" and the other one is "className"
Hello everyone !
Just wanted to say a big Thank you to Eternicode; Thanks to you, i've been able to get my class css to change dynamically in ie6 using element.className. I tried all ways except this one...and now it works ! Thanks à lot !
I've found that it works like so in IE7 and FF3:
document.getElementById(e).setAttribute("class", c);
document.getElementById(e).setAttribute("className", c);
Hi.... I was looking for a quick method to update the mask of a textbox, it was so usefull thank you so much.
weird behaviour in IE6, it jost work if you set both "class" and "className", as rick ratayczak posted
Thank you! I'm discovering that backwards compatibility with IE6 is trickier than it sounds.
mille grazie. lo uso ora.
Thankyou everyone who pointed this bug out and/or supplied a fix. It took me a while to figure out exactly where the problem was since this doesn't throw any errors.
Good stuff people. Thanks.
And what if I want to add a class, but keeping the classes the element already has?
I mean, I have an element with a class, let's name it myClass1, and
I want to add a secondary class, let's name it myClass2; to apply some effects dynamically.
Is there any method to do it, or do i need to use something like:
document.getElementById("blah").className = document.getElementById("blah").className+" myClass2"
(I don't know if this workaround may work)
thanks in advance!!
What i really wanted to change the part inside the >< NOT in the <> example (wanting to change part in italics)
This is a COOL website!
Is there a name for that or something?