Change an element's CSS class with JavaScript

Question

How can I change a CSS class of an HTML element in response to an onClick event using JavaScript?

"The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class." -w3schools.com/tags/att_standard_class.asp — Triynko, Apr 7 '11 at 18:11
element.setAttribute(name, value); Replace name with class. Replace value with whatever name you have given the class, enclosed in quotes. This avoids needing to delete the current class and adding a different one. This jsFiddle example shows full working code. — Sandy Good, May 18 '14 at 4:59

Peter Boughton · Accepted Answer · 2013-08-02 21:59:33Z

Adding and Removing Classes, with simple cross-browser JavaScript

The standard JavaScript way to select an element is using document.getElementById("Id"), which is what the following examples use - you can of course obtain elements in other ways, and in the right situation may simply use this instead - however, going into detail on this is beyond the scope of the answer.

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("MyElement").className = "MyClass";

(You can use a space-delimited list to apply multiple classes.)

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* code wrapped for readability - above is all one statement */

An explanation of this regex is as follows:

(?:^|\s) # match the start of the string, or any single whitespace character

MyClass  # the literal text for the classname to remove

(?!\S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

The g flag tells the replace to repeat as required, in case the class name has been added multiple times.

To check if a class is already applied to an element:

The same regex used above for removing a class can also be used as a check as to whether a particular class exists:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Assigning these actions to onclick events:

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JS interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(It is not required to have this code in script tags, this is simply for brevity of example, and including the JS in a distinct file may be more appropriate.)}

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }

    window.onload = function()
    {
        document.getElementById("MyElement").addEventListener( 'click' , changeClass );
    }
</script>
...
<button id="MyElement">My Button</button>

(Note that the window.onload part is required so that the contents of that function are executed after the HTML has finished loading - without this, the MyElement might not exist when the JS is called, so that line would fail.)

JavaScript Frameworks and Libraries

The above code is all in standard JavaScript, however it is common practise to use either a framework or a library to simplify common tasks, as well as benefit from fixed bugs and edge cases that you might not think of when writing your code.

Whilst some people consider it overkill to add a ~50KB framework for simply changing a class, if you are doing any substantial amount of JavaScript work, or anything that might have unusual cross-browser behaviour, it is well worth considering.

(Very roughly, a library is a set of tools designed for a specific task, whilst a framework generally contains multiple libraries and performs a complete set of duties.)

The examples above have been reproduced below using jQuery, probably the most commonly used JavaScript library (though there are others worth investigating too).

(Note that $ here is the jQuery object.)

Changing Classes with jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

In addition, jQuery provides a shortcut for adding a class if it doesn't apply, or removing a class that does:

$('#MyElement').toggleClass('MyClass');

Assigning a function to a click event with jQuery:

$('#MyElement').click(changeClass);

or, without needing an id:

$(':button:contains(My Button)').click(changeClass);

HTML5 Techniques for changing classes

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

document.getElementById("MyElement").classList.add('class');

document.getElementById("MyElement").classList.remove('class');

if ( document.getElementById("MyElement").classList.contains('class') )

document.getElementById("MyElement").classList.toggle('class');

Unfortunately, these do not work in Internet Explorer prior to v10, though there is a shim to add support for it to IE8 and IE9, available from this page.

Great answer Peter. One question... why is it better to do with with JQuery than Javascript? JQuery is great, but if this is all you need to do - what justifies including the entire JQuery libray instead of a few lines of JavaScript? — mattstuehler, May 15 '11 at 15:32
@mattstuehler 1) the phrase "better yet x" often means "better yet (you can) x". 2) To get to the heart of the matter, jQuery is designed to aid in accessing/manipulating the DOM, and very often if you need to do this sort of thing once you have to do it all over the place. — Barry, May 24 '11 at 16:46
One bug with this solution: When you click on your button multiple times, it will add the Class of " MyClass" to the element multiple times, rather than checking to see if it already exists. Thus you could end up with an HTML class attribute looking something like this: class="button MyClass MyClass MyClass" — Web_Designer, Sep 13 '11 at 16:28
I guess the solution to that would be: if ( ! document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) or, with jQuery: if ( ! $j('#MyElement').hasClass('MyClass') ) (although I suspect addClass wont add duplicates?) — Peter Boughton, Sep 14 '11 at 0:14
If you're trying to remove a class 'myClass' and you have a class 'prefix-myClass' the regex you gave above for removing a class will leave you with 'prefix-' in your className :O — jinglesthula, Sep 15 '11 at 5:26

Tyilo · Answer 2 · 2012-09-26 07:41:19Z

up vote 242 down vote

You could also just do:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

And to toggle a class (remove if exists else add it):

document.getElementById('id').classList.toggle('class');

edited Sep 26 '12 at 7:41

answered Aug 5 '11 at 17:44

Tyilo
8,1351052108

47

I believe this is HTML5 dependent. – John Oct 27 '11 at 17:16

9

You’ll need Eli Grey’s classList shim. – ELLIOTTCABLE Nov 14 '11 at 14:34

34

worth noting this doesn't work in IE versions less than 8.. – Lloyd Jan 24 '12 at 10:24

11

Mozilla Developer Network states that it doesn't work, natively, in Internet Explorers less than 10. I find the statement to be true, in my testing. Apparently, the Eli Grey shim is required for Internet Explorer 8-9. Unfortunately, I couldn't find it on his site (even with searching). The shim is available on the Mozilla link. – doubleJ Oct 29 '12 at 4:13

Feature not supported until a few hours ago (added on IE10 and Android 3) – Andrew Aug 2 '14 at 23:13

add a comment |

crowjonah · Answer 3 · 2014-04-03 13:07:13Z

up vote 54 down vote

In one of my old projects that did not use jQuery, I built the following functions for adding, removing, and checking if element has class:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

So, for example, if I want onclick to add some class the the button I can use this:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

By now for sure it would just better to use jQuery.

edited Apr 3 '14 at 13:07

crowjonah
2,25811126

answered May 28 '11 at 7:32

Andrew Orsich
28.5k675100

5

This is great for when your client doesn't let you use jQuery. (Cause you end up almost building your own library.) – Mike Jul 24 '13 at 5:16

@Mike If the client doesn't let you use jQuery, could you not just go through and rebuild only the features you needed into your own library? – kfrncs Nov 18 '13 at 5:04

@kfrncs Because I don't generally need that large of a framework. For the project I was thinking of, the only functions I needed were the 3 classname(has,add,remove) functions and the cookie(has, add, remove) functions. Everything else was either custom, or natively well supported. So everything together was then only 150 lines before minifying, including comments. – Mike Nov 18 '13 at 19:17

add a comment |

Eric Wendelin · Answer 4 · 2012-08-22 00:32:33Z

up vote 46 down vote

You can use node.className like so:

document.getElementById('foo').className = 'bar';

This should work in IE5.5 and up according to PPK.

edited Aug 22 '12 at 0:32

answered Oct 12 '08 at 20:33

Eric Wendelin
15.9k54070

add a comment |

Peter Mortensen · Answer 5 · 2012-06-11 15:59:53Z

Using pure JavaScript code:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

same as here: snipplr.com/view/3561/addclass-removeclass-hasclass — Jaider, Apr 20 '12 at 20:40

Travis J · Answer 6 · 2014-10-19 23:47:46Z

up vote 24 down vote

Wow, surprised there are so many overkill answers here...

<div class="firstClass" onclick="this.className='secondClass'">

edited Oct 19 '14 at 23:47

answered Jan 5 '12 at 19:14

Travis J
36.3k878136

8

yes, but unobtrusive javascript is better practice.. – Lloyd Jan 24 '12 at 10:27

10

I would say unobtrusive javascript is terrible practice for writing example code... – Gabe Apr 13 '12 at 14:50

3

I would disagree, because I think example code should set a good example. – thomasrutter Mar 29 at 23:36

add a comment |

Peter Mortensen · Answer 7 · 2012-06-11 16:01:02Z

up vote 16 down vote

This is working for me:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

edited Jun 11 '12 at 16:01

Peter Mortensen
8,308105794

answered Dec 8 '11 at 9:36

Gopal Krishna Ranjan
3781517

Excellent answer! Just left to add : Set for each CSS class name for selector to specify a style for a group of class elements – Roman Polenov May 8 '12 at 11:19

This works for me on FF, but when I've tried to use el.className = "newStyle"; it didn't worked, why? – Lukasz 'Severiaan' Grela Jul 19 '12 at 12:29

You can use el.setAttribute('class', newClass) or better el.className = newClass. But not el.setAttribute('className', newClass). – Oriol Feb 11 at 15:54

add a comment |

Alex Robinson · Answer 8 · 2012-05-02 04:59:17Z

Couple of minor notes and tweaks on the regex from above:

You'll want to do it globally in case the class list has the class name more than once. And, you'll probably want to strip spaces from the ends of the class list and convert multiple spaces to one space to keep from getting runs of spaces. None of these things should be a problem if the only code dinking with the class names uses the regex below and removes a name before adding it. But. Well, who knows who might be dinking with the class name list.

This regex is case insensitive so that bugs in class names may show up before the code is used on a browser that doesn't care about case in class names.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

Ben Flynn · Answer 9 · 2011-11-26 21:04:12Z

Just to add on information from another popular framework, Google Closures, see their dom/classes class:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

One option for selecting the element is using goog.dom.query with a CSS3 selector:

var myElement = goog.dom.query("#MyElement")[0];

moka · Answer 10 · 2013-04-11 10:13:36Z

As well you could extend HTMLElement object, in order to add methods to add, remove, toggle and check classes (gist):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

And then just use like this (on click will add or remove class):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Here is demo.

this one is a little verbose...here is a very succinct solution...jsfiddle.net/jdniki/UaT3P — Jackson_Sandland, Aug 18 '14 at 19:28
Sorry @Jackson_Sandland but you've totally missed the point, which is not to use jQuery at all. — moka, Aug 21 '14 at 8:36

Peter Mortensen · Answer 11 · 2013-01-06 18:17:49Z

Change an element's CSS class with JavaScript in ASP.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

I knew there was a reason I hated working with ASP.NET. – iandisme Jun 7 '11 at 14:44 — iandisme, Jun 7 '11 at 14:44

shingokko · Answer 12 · 2013-10-25 02:50:27Z

I would use jQuery and write something like this:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

This code adds a function to be called when an element of the id some-element is clicked. The function appends clicked to the element's class attribute if it's not already part of it, and removes it if it's there.

Yes you do need to add a reference to the jQuery library in your page to use this code, but at least you can feel confident the most functions in the library would work on pretty much all the modern browsers, and it will save you time implementing your own code to do the same.

Thanks

You only have to write jQuery in its long form once. jQuery(function($) { }); makes $ available inside the function in all cases. — ThiefMaster♦, Jun 13 '12 at 14:38

Peter Mortensen · Answer 13 · 2011-05-24 16:39:15Z

up vote 2 down vote

The line

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

should be:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

edited May 24 '11 at 16:39

Peter Mortensen
8,308105794

answered Dec 8 '09 at 22:15

Eric Bailey
531

5

Incorrect. The RegEx is delimeted by the forward slashes. Adding quotes causes it to fail in IE, returning the string of the class you're trying to remove rather than actually removing the class. – Dylan Aug 14 '11 at 21:46

add a comment |

Peter Mortensen · Answer 14 · 2013-01-06 18:20:53Z

up vote 1 down vote

Here's my version, fully working:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Usage:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

edited Jan 6 '13 at 18:20

Peter Mortensen
8,308105794

answered Oct 17 '12 at 12:21

alfred
479310

2

That will break class foobar if you try to remove class foo. The JS in the intrinsic event handler attributes was broken before being edited. The 4 year old accepted answer is much better. – Quentin Oct 17 '12 at 12:25

1

thanks, i fixed it (not the prefix problem). it's the old accepted answer that have a bug with the regexp. – alfred Oct 17 '12 at 12:27

add a comment |

Salman A · Answer 15 · 2014-01-18 09:37:49Z

I use the following vanilla JavaScript functions in my code. They use regular expressions and indexOf but do not require quoting special characters in regular expressions.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

You can also use element.classList in modern browsers.

PHPglue · Answer 16 · 2015-03-20 02:35:01Z

Just thought I'd throw this in:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

Peter Mortensen · Answer 17 · 2014-07-19 13:58:00Z

Here is simple jQuery code to do that.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Here,

Class1 is a listener for an event.
The parent class is the class which hosts the class you want to change
Classtoremove is the old class you have.
Class to add is the new class that you want to add.
100 is the timeout delay during which the class is changed.

Good Luck.

Jon Galloway · Answer 18 · 2008-10-12 20:12:16Z

up vote -15 down vote

This is easiest with a library like jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

answered Oct 12 '08 at 20:12

Jon Galloway
30.3k1498174

5

What does the javascript: pseudo-protocol do in a script-event ... It seems totally stupid to tell the javascript-interpretator, that it should treat script in a script-event as script !-) Only use of the javascript: pseudo-protocol is where you instead would use an url !o] – roenving Oct 12 '08 at 20:20

3

In that context, it isn't the pseudo-protocol - it's a loop label ... only there is no loop for it TO label. – Quentin Oct 13 '08 at 8:19

5

Actually, that is not a pseudo-protocol, it is interpreted as a JavaScript label, like what you can use in a loop. One could easily do onClick="myScriptYo:do_it();". But, please, don't do it. – kzh Mar 9 '11 at 20:32

add a comment |

Peter Mortensen · Answer 19 · 2011-05-24 16:40:27Z

up vote -42 down vote

No offense, but it's unclever to change class on-the-fly as it forces the CSS interpreter to recalculate the visual presentation of the entire web page.

The reason is that it is nearly impossible for the CSS interpreter to know if any inheritance or cascading could be changed, so the short answer is:

Never ever change className on-the-fly !-)

But usually you'll only need to change a property or two, and that is easily implemented:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

edited May 24 '11 at 16:40

Peter Mortensen
8,308105794

answered Oct 12 '08 at 20:16

roenving
1,256611

7

i've never experienced any performance issues with switching CSS classes myself. I think whatever performance hit there might be, it's far outweighed by the messiness of having styles/presentation mixed up in your javascript. – nickf Oct 12 '08 at 20:46

4

Hrm, obviously you never tested it ... In a realtime application consisting of thousands of rows nested with other elements I recognized a delay of several seconds, remaking it only to change properties it wasn't possible to recognize delay ... – roenving Oct 12 '08 at 20:51

5

Why would you even want thousands of rows nested with other elements? Also, what operating system & browser was this delay with? – Peter Boughton Oct 12 '08 at 21:49

29

If changing a className is causing noticeable performance problems, you have much bigger problems in the structure and design of your page/app. If not, shaving off a few milliseconds is not a good reason to pollute your application logic with styles. – eyelidlessness Oct 13 '08 at 3:33

23

this is the worst idea ever. changing classes is by far and away the easiest and cleanest way to update your CSS on the fly. – Jason Dec 8 '09 at 22:19

| show 2 more comments

asked	6 years ago
viewed	1084983 times
active	1 month ago

current community

your communities

more stack exchange communities

Change an element's CSS class with JavaScript

19 Answers 19

Adding and Removing Classes, with simple cross-browser JavaScript

To change all classes for an element:

To add an additional class to an element:

To remove a class from an element:

To check if a class is already applied to an element:

Assigning these actions to onclick events:

JavaScript Frameworks and Libraries

Changing Classes with jQuery:

Assigning a function to a click event with jQuery:

HTML5 Techniques for changing classes

protected by Community♦ Oct 26 '11 at 15:51

Not the answer you're looking for? Browse other questions tagged javascript css dom or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

Change an element's CSS class with JavaScript

19 Answers 19

Adding and Removing Classes, with simple cross-browser JavaScript

To change all classes for an element:

To add an additional class to an element:

To remove a class from an element:

To check if a class is already applied to an element:

Assigning these actions to onclick events:

JavaScript Frameworks and Libraries

Changing Classes with jQuery:

Assigning a function to a click event with jQuery:

HTML5 Techniques for changing classes

protected by Community♦ Oct 26 '11 at 15:51

Not the answer you're looking for? Browse other questions tagged javascript css dom or ask your own question.

Linked

Related

Hot Network Questions