Add and remove attribute class.js

add_and_remove_attribute_class.js

var attrClass = (function() {

	var _element = null,
		_listener = [];

	var setElement = function(element) {
		_element = element;
		_listener = _element.className.split(' ');
	};

	var hasClass = function(className) {
	
		var has = false;
	
		if (_element !== null) {
	
			var names = _element.className;
	
			if (RegExp(className).test(names)) {
				has = true;
			}
	
		}
	
		return has;
	
	};

	var add = function(className) {
	
		if (_element !== null) {
	
			var listCLassName = className.split(' ');
	
			for (var key in listCLassName) {
			
				if (!hasClass(listCLassName[key])) {
					_listener.push(listCLassName[key]);
				}
			
			}
	
			_element.className = _listener.join(' ');
	
		}  
	
	};

	var remove = function(className) {
	
		if (_element !== null) {
		
			var listCLassName = className.split(' '),
			listClass = _element.className;
		
			for (var key in listCLassName) {
			
				if (hasClass(listCLassName[key])) {
				listClass = listClass.replace(RegExp(listCLassName[key], 'g'), '');
				}       
			
			}
		
			_element.className = listClass;
		
		}
	
	};

	var toString = function() {
		return _listener.join(' ');
	};

	return {
		add: function(element, className) {
			setElement(element);
			add(className);
		},
		remove: function(element, className) {
			setElement(element);
			remove(className);
		},
		toString: function(element) {
			setElement(element);
			return toString();
		}
	};

})();

(function() {

	var myElement = document.getElementById('my_element'),
	result = document.getElementById('result');

	document.getElementById('txt_add_class').addEventListener('click', function() {
	
		attrClass.add(myElement, 'font');
		attrClass.add(myElement, 'margin');
		attrClass.add(myElement, 'border');
	
		result.innerHTML = attrClass.toString(myElement);

	}, false);

	document.getElementById('txt_remove_class').addEventListener('click', function() {

		attrClass.remove(myElement, 'size');
		attrClass.remove(myElement, 'border');
	
		result.innerHTML = '<br>' + attrClass.toString(myElement);
	
	}, false);

})();