Adding CSS classes to an element using JavaScript

Question

<body>
    <div id="foo"></div>
    <button onclick ="addClass(el,'Test') ">click</button>
</body>

<script>
    function addClass(element, myClass) {

         element.className = myClass; 
}
    var el = document.getElementById('foo');
</script>

I would like to add more more classes without the previous class being removed.

user1823761 · Accepted Answer · 2013-05-25 05:28:36Z

4

Working FIDDLE Demo

Try this:

function addClass(element, myClass) {
    element.className += ' ' + myClass; 
}

var foo = document.getElementById('foo');
addClass(foo, 'a');
addClass(foo, 'b');

answered May 25, 2013 at 5:28

user1823761

Sign up to request clarification or add additional context in comments.

2 Comments

Phrogz Over a year ago

OK, +1 for that sweet kbd demo style :) I'm totally stealing it :)

user1823761 Over a year ago

@Phrogz It's yours... :).

Phrogz · Accepted Answer · 2013-05-25 05:31:32Z

CSS classes are space delimited in the attribute, so:

function addClass(element, myClass){
   element.className += ' '+myClass;
}

Or, for modern browsers, use classList API:

function addClass(element, myClass){
   element.classList.add(myClass);
}

…which you can even polyfill for older browsers.

If you are not using classList and wanted to ensure that your class attribute has only one instance of a given class in the string, you can remove it first (totally unnecessary but for OCD):

var re = new RegExp( "(?:^|\\s)"+myClass+"(?:\\s|$)", 'g' );
el.className = el.className.replace(re, '');

Collectives™ on Stack Overflow

Adding CSS classes to an element using JavaScript

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related