<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.
Try this:
function addClass(element, myClass) {
element.className += ' ' + myClass;
}
var foo = document.getElementById('foo');
addClass(foo, 'a');
addClass(foo, 'b');
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, '');
