Add Class, NOT setAttribute

JavaScript
1

How do I add a class without using setAttribute using the code below?


var drop_selected = document.getElementsByName('search_category');
	for (var x in drop_selected) {
		drop_selected[x].onclick = function(){
			for (var c=0; c<drop_selected.length; c++) { 
				drop_selected[c].setAttribute("class", ""); 
			}
			this.setAttribute("class", "drop_selected");
			return false;
		}
	}
2 

el.className = 'myClass';
3

And if you have pre-existing class names that you don’t want to clobber, you can use some hasClass, addClass and removeClass functions to simplify the process.


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,' ');
    }
}

And one I always like to include - toggleClass


function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
        removeClass(ele, cls);
    } else {
        addClass(ele, cls);
    }
}
4

What does toggle class toggle to? It only lets you define one class

5

It toggles whether your specified class name appears or not.
If the class name is already on the element, it is removed from that element.
If the class name is not on the element, it’s added to that element.