mozilla
您的搜索结果

    Element.classList

    概述

    classList 返回一个包含元素 class 属性的 token list。

    classList 作为 element.className 这个空格分隔的(space-delimited)字符串的替代,用来便捷地访问一个元素的 class 列表。它包含以下方法:

    • add - 添加一个 class 到元素的 class 列表中
    • remove - 从元素的 class 列表中移除一个 class
    • toggle - 切换一个 class 是否存在于一个元素的 class 列表中
      • 参考下面关于第二个可选参数
    • contains - 查询一个指定的 class 是否存在于元素的 class 列表中

    语法

    var elementClasses = elementNodeReference.classList;
    

    elementClasses 是一个表示 elementNodeReference 的 class 属性的 DOMTokenList。如果 class 属性没有被设置或为空,则 elementClasses.length 返回 0。element.classList 本身是只读的,虽然你可以使用 add()remove() 方法修改它。

    toggle 方法有一个可选的第二个参数,基于该参数是否为真,用来决定添加还是移除一个 class。例如,要移除一个 class,不论其存在与否,都可以调用 element.classList.toggle('classToBeRemoved', false); 而要添加一个 class,不论其存在与否,都可以调用 element.classList.toggle('classToBeAdded', true);

    示例

    // div 是一个指向 <div> 元素(其 class 为 "foo bar")的对象引用
    div.classList.remove("foo");
    div.classList.add("anotherclass");
    
    // 如果存在 visible,则移除它,否则添加它
    div.classList.toggle("visible");
    
    alert(div.classList.contains("foo"));
    
    div.classList.add("foo","bar"); //添加多个 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

    跨浏览器实现

    注意:下面的代码在低于 8 的 IE 版本中不起作用。
    /*
     * classList.js: Cross-browser full element.classList implementation.
     * 2014-01-31
     *
     * 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 && !("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
      ;
      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, force) {
      token += "";
    
      var
          result = this.contains(token)
        , method = result ?
          force !== true && "remove"
        :
          force !== false && "add"
      ;
    
      if (method) {
        this[method](token);
      }
    
      return typeof force === "boolean" ? force : !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));
    
    }

    浏览器兼容性

    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) 11 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) ? ? ?

    规范

    相关链接

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, Wladimir_Palant, teoli, AlexChao
    最后编辑者: teoli,