mozilla
Your Search Results

    Element.classList

    Summary

    classList returns a token list of the class attribute of the element.

    classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.

     

    Syntax

    var elementClasses = elementNodeReference.classList;
    

    elementClasses is a DOMTokenList representing the class attribute of elementNodeReference. If the class attribute was not set or is empty elementClasses.length returns 0. element.classList itself is read-only, although you can modify it using the add() and remove() methods.

     

    Methods

    add(name)
    Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.
    name (String)
    A case-sensitive string representing the class name.
    returns
    nothing
     
    remove(name)
    Removes a class from an element's list of classes in a safe manor. Error's are not thrown If the class does not exist.
    name (String)
    A case-sensitive string representing the class name.

    returns
    nothing
    toggle(name [, force] )
    If the name exists within the element's classList, it will be removed. If name does not exist, it will be added.
    name (String)
    A case-sensitive string representing the class name.

    force (Boolean) [optional]

    When TRUE, adds the class (same as add()). When FALSE, the class is removed (same as remove()). If not used (undefined or simply non existent), normal toggle behavior ensues.

    Useful for adding or removing in one-step based on a condition. See example below for clarity.

    returns (Boolean)
    TRUE if class is now present, and FALSE otherwise.

    contains(name)
    Checks if an element's list of classes contains a specific class .
    name (String)
    A case-sensitive string representing the class name.

    returns (Boolean)
    Returns TRUE if class is present, and FALSE otherwise.
     

    Examples

    // div is an object reference to a <div> element with class="foo bar"
    div.classList.remove("foo");
    div.classList.add("anotherclass");
    
    // if visible is set remove it, otherwise add it
    div.classList.toggle("visible");
    
    //  add/remove visible, depending on test conditional, i less than 10
    div.classList.toggle("visible", i < 10 );
    
    alert(div.classList.contains("foo"));
    
    div.classList.add("foo","bar"); //add multiple classes

    Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See https://bugzilla.mozilla.org/show_bug.cgi?id=814014

    JavaScript shim for other implementations

    Note: This shim does not work in Internet Explorer versions less than 8.
    /* 
     * classList.js: Cross-browser full element.classList implementation.
     * 2014-07-23
     *
     * By Eli Grey, http://eligrey.com
     * Public Domain.
     * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
     */
    
    /*global self, document, DOMException */
    
    /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
    
    if ("document" in self) {
    
    // Full polyfill for browsers with no classList support
    if (!("classList" in document.createElement("_"))) {
    
    (function (view) {
    
    "use strict";
    
    if (!('Element' in view)) return;
    
    var
    	  classListProp = "classList"
    	, protoProp = "prototype"
    	, elemCtrProto = view.Element[protoProp]
    	, objCtr = Object
    	, strTrim = String[protoProp].trim || function () {
    		return this.replace(/^\s+|\s+$/g, "");
    	}
    	, arrIndexOf = Array[protoProp].indexOf || function (item) {
    		var
    			  i = 0
    			, len = this.length
    		;
    		for (; i < len; i++) {
    			if (i in this && this[i] === item) {
    				return i;
    			}
    		}
    		return -1;
    	}
    	// Vendors: please allow content code to instantiate DOMExceptions
    	, DOMEx = function (type, message) {
    		this.name = type;
    		this.code = DOMException[type];
    		this.message = message;
    	}
    	, checkTokenAndGetIndex = function (classList, token) {
    		if (token === "") {
    			throw new DOMEx(
    				  "SYNTAX_ERR"
    				, "An invalid or illegal string was specified"
    			);
    		}
    		if (/\s/.test(token)) {
    			throw new DOMEx(
    				  "INVALID_CHARACTER_ERR"
    				, "String contains an invalid character"
    			);
    		}
    		return arrIndexOf.call(classList, token);
    	}
    	, ClassList = function (elem) {
    		var
    			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
    			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
    			, i = 0
    			, len = classes.length
    		;
    		for (; i < len; i++) {
    			this.push(classes[i]);
    		}
    		this._updateClassName = function () {
    			elem.setAttribute("class", this.toString());
    		};
    	}
    	, classListProto = ClassList[protoProp] = []
    	, classListGetter = function () {
    		return new ClassList(this);
    	}
    ;
    // Most DOMException implementations don't allow calling DOMException's toString()
    // on non-DOMExceptions. Error's toString() is sufficient here.
    DOMEx[protoProp] = Error[protoProp];
    classListProto.item = function (i) {
    	return this[i] || null;
    };
    classListProto.contains = function (token) {
    	token += "";
    	return checkTokenAndGetIndex(this, token) !== -1;
    };
    classListProto.add = function () {
    	var
    		  tokens = arguments
    		, i = 0
    		, l = tokens.length
    		, token
    		, updated = false
    	;
    	do {
    		token = tokens[i] + "";
    		if (checkTokenAndGetIndex(this, token) === -1) {
    			this.push(token);
    			updated = true;
    		}
    	}
    	while (++i < l);
    
    	if (updated) {
    		this._updateClassName();
    	}
    };
    classListProto.remove = function () {
    	var
    		  tokens = arguments
    		, i = 0
    		, l = tokens.length
    		, token
    		, updated = false
    		, index
    	;
    	do {
    		token = tokens[i] + "";
    		index = checkTokenAndGetIndex(this, token);
    		while (index !== -1) {
    			this.splice(index, 1);
    			updated = true;
    			index = checkTokenAndGetIndex(this, token);
    		}
    	}
    	while (++i < l);
    
    	if (updated) {
    		this._updateClassName();
    	}
    };
    classListProto.toggle = function (token, force) {
    	token += "";
    
    	var
    		  result = this.contains(token)
    		, method = result ?
    			force !== true && "remove"
    		:
    			force !== false && "add"
    	;
    
    	if (method) {
    		this[method](token);
    	}
    
    	if (force === true || force === false) {
    		return force;
    	} else {
    		return !result;
    	}
    };
    classListProto.toString = function () {
    	return this.join(" ");
    };
    
    if (objCtr.defineProperty) {
    	var classListPropDesc = {
    		  get: classListGetter
    		, enumerable: true
    		, configurable: true
    	};
    	try {
    		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
    	} catch (ex) { // IE 8 doesn't support enumerable:true
    		if (ex.number === -0x7FF5EC54) {
    			classListPropDesc.enumerable = false;
    			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
    		}
    	}
    } else if (objCtr[protoProp].__defineGetter__) {
    	elemCtrProto.__defineGetter__(classListProp, classListGetter);
    }
    
    }(self));
    
    } else {
    // There is full or partial native classList support, so just check if we need
    // to normalize the add/remove and toggle APIs.
    
    (function () {
    	"use strict";
    
    	var testElement = document.createElement("_");
    
    	testElement.classList.add("c1", "c2");
    
    	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
    	// classList.remove exist but support only one argument at a time.
    	if (!testElement.classList.contains("c2")) {
    		var createMethod = function(method) {
    			var original = DOMTokenList.prototype[method];
    
    			DOMTokenList.prototype[method] = function(token) {
    				var i, len = arguments.length;
    
    				for (i = 0; i < len; i++) {
    					token = arguments[i];
    					original.call(this, token);
    				}
    			};
    		};
    		createMethod('add');
    		createMethod('remove');
    	}
    
    	testElement.classList.toggle("c3", false);
    
    	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
    	// support the second argument.
    	if (testElement.classList.contains("c3")) {
    		var _toggle = DOMTokenList.prototype.toggle;
    
    		DOMTokenList.prototype.toggle = function(token, force) {
    			if (1 in arguments && !this.contains(token) === !force) {
    				return force;
    			} else {
    				return _toggle.call(this, token);
    			}
    		};
    
    	}
    
    	testElement = null;
    }());
    
    }
    
    }

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 8.0 3.6 (1.9.2) 10 11.50 5.1
    WebKit bug 20709
    toggle method's second argument 24 24 (24) not supported 15 yes
    WebKit bug 99375

     

    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 3.0 1.0 (1.9.2) 10 11.10 5.0
    toggle method's second argument ? 24.0 (24) ? ? ?

    Specification

    See also

    Hide Sidebar