path: root/files/zh-tw/web/api/element/classlist/index.html

---
title: Element.classList
slug: Web/API/Element/classList
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>

<p><code><strong>Element.classList</strong></code> 唯讀屬性代表了該元素所擁有之類別屬性（<code>Class</code> {{Glossary("Attribute")}}）的即時更新集－{{domxref("DOMTokenList")}}。</p>

<p>使用 <code>classList</code> 屬性是取得元素 <code>Class</code> 的一種便利方式，也可以透過 {{domxref("element.className")}} 來得到以空格分隔之 <code>Class</code> 清單字串。</p>

<h2 id="語法">語法</h2>

<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList;
</pre>

<p><em>elementClasses</em> is a {{domxref("DOMTokenList")}} representing the class attribute of <em>elementNodeReference</em>. If the class attribute was not set or is empty <em>elementClasses.length</em> returns 0. <code>element.classList</code> itself is read-only, although you can modify it using the<code> add()</code> and <code>remove()</code> methods.</p>

<h2 id="方法">方法</h2>

<dl>
 <dt>add( String [, String] )</dt>
 <dd>Add specified class values. If these classes already exist in attribute of the element, then they are ignored.</dd>
 <dt>remove( String [,String] )</dt>
 <dd>Remove specified class values.</dd>
 <dt><strong>item</strong> ( Number )</dt>
 <dd>Return class value by index in collection.</dd>
 <dt><strong>toggle</strong> ( String [, force] )</dt>
 <dd>When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.<br>
 When a second argument is present: If the second argument is true, add specified class value, and if it is false, remove it.</dd>
 <dt>contains( String )</dt>
 <dd>Checks if specified class value exists in class attribute of the element.</dd>
</dl>

<h2 id="範例">範例</h2>

<pre class="brush: js">// div is an object reference to a &lt;div&gt; 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 &lt; 10 );

alert(div.classList.contains("foo"));

div.classList.add("foo","bar"); //add multiple classes</pre>

<div class="note">
<p>Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
</div>

<h2 id="JavaScript_shim_for_other_implementations">JavaScript shim for other implementations</h2>

<div class="note"><strong>Note:</strong> This shim does not work in Internet Explorer versions less than 8.</div>

<pre class="brush: js">/*
 * 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 &lt; len; i++) {
      if (i in this &amp;&amp; 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 &lt; 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 &lt; 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 &lt; l);

  if (updated) {
    this._updateClassName();
  }
};
classListProto.toggle = function (token, force) {
  token += "";

  var
      result = this.contains(token)
    , method = result ?
      force !== true &amp;&amp; "remove"
    :
      force !== false &amp;&amp; "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 &lt;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 &lt; len; i++) {
          token = arguments[i];
          original.call(this, token);
        }
      };
    };
    createMethod('add');
    createMethod('remove');
  }

  testElement.classList.toggle("c3", false);

  // Polyfill for IE 10 and Firefox &lt;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 &amp;&amp; !this.contains(token) === !force) {
        return force;
      } else {
        return _toggle.call(this, token);
      }
    };

  }

  testElement = null;
}());

}

}</pre>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>8.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>10<sup>[1]</sup></td>
   <td>11.50</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>24</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("24")}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>15</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>3.0</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>10</td>
   <td>11.10</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("24")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Not supported for SVG elements.  See <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
 [2] Internet Explorer never implemented this. See <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.</p>

<h2 id="參見">參見</h2>

<ul>
 <li>{{domxref("element.className")}}</li>
 <li>{{domxref("DOMTokenList")}};</li>
</ul>