mozilla
Vos résultats de recherche

    element.classList

    Résumé

    classList retourne la liste des classes CSS définies dans l'attribut class d'un élément.

    classList est une alternative pratique pour accéder à la liste des classes d'un élément  sans devoir découper la chaine de caractères disponible via la propriété element.className.

    Ainsi, accomplir les taches suivantes est rendu plus simple :

    • ajouter une classe à la liste des classes d'un element
    • supprimer une classe de la liste des classes d'un element
    • basculer l'existence d'une classe
    • vérifier si un élément contient une classe spécifique

    Syntaxe

    var elementClasses = elementNodeReference.classList;
    

    elementClasses est une DOMTokenList representant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().

    Exemple

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

    JavaScript shim pour les autres implémentations

    Note: Ce shim ne fonctionne pas sous les versions d'Internet Explorer inférieures à 8.
    /*
     * classList.js: Cross-browser full element.classList implementation.
     * 2012-11-15
     *
     * 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 (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
    
    (function (view) {
    
    "use strict";
    
    if (!('HTMLElement' in view) && !('Element' in view)) return;
    
    var
    	  classListProp = "classList"
    	, protoProp = "prototype"
    	, elemCtrProto = (view.HTMLElement || 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.className)
    			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
    			, i = 0
    			, len = classes.length
    		;
    		for (; i < len; i++) {
    			this.push(classes[i]);
    		}
    		this._updateClassName = function () {
    			elem.className = 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
    	;
    	do {
    		token = tokens[i] + "";
    		var index = checkTokenAndGetIndex(this, token);
    		if (index !== -1) {
    			this.splice(index, 1);
    			updated = true;
    		}
    	}
    	while (++i < l);
    
    	if (updated) {
    		this._updateClassName();
    	}
    };
    classListProto.toggle = function (token, forse) {
    	token += "";
    
    	var
    		  result = this.contains(token)
    		, method = result ?
    			forse !== true && "remove"
    		:
    			forse !== false && "add"
    	;
    
    	if (method) {
    		this[method](token);
    	}
    
    	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));
    
    }

    Compatibilités navigateurs

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 8.0 3.6 (1.9.2)
    bug 501257
    10 Opera 11.50 5.1
    WebKit bug 20709
    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

    Specification

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: Delapouite, juleschz, fscholz, teoli, khalid32
    Dernière mise à jour par : khalid32,