MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

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. It contains the following methods:

    • add - 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.
    • remove - Removes a class from an element's list of classes. If class does not exist in the element's list of classes, it will not throw an error or exception.
    • toggle - Toggles the existence of a class in an element's list of classes
      • See below about the optional second argument.
    • contains - Checks if an element's list of classes contains a specific class

    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.

    The toggle method has an optional second argument that will force the class name to be added or removed based on the truthiness of the second argument. For example, to remove a class (if it exists or not) you can call element.classList.toggle('classToBeRemoved', false); and to add a class (if it exists or not) you can call element.classList.toggle('classToBeAdded', true);

    Example

    // 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");
    
    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