classlist_探索classList API

最新推荐文章于 2020-07-24 07:42:31 发布

dingshi7798

最新推荐文章于 2020-07-24 07:42:31 发布

阅读量128

点赞数

文章标签： python javascript java js css ViewUI

原文链接：https://www.sitepoint.com/exploring-classlist-api/

版权

classlist

自从HTML的创建和第一个网站的诞生以来，开发人员和设计师就尝试自定义其页面的外观。这种需求变得如此重要，以至于创建了一个称为CSS的标准来正确管理样式并将其与内容分离。在当今高度互动的网站中，您通常需要添加，删除或切换类名（通常称为“ CSS类”）。从历史上看，处理JavaScript中的这些更改有些复杂，因为没有内置方法可以执行这些操作。在HTML5引入classList API之前就是这种情况。在本文中，我们将发现此API的工作方式及其提供的方法。

注意：“ CSS类”一词通常用于指代类名。这些是您放入元素的class属性中的字符串。但是，有一篇有趣的文章建议该术语不正确，您应该避免使用它。为了简洁起见，在本文中，我将使用“类”一词作为“类名”的快捷方式。

什么是classList API？

classList API提供了管理DOM元素的类名称的方法和属性。使用它，我们可以执行诸如添加和删除类或检查元素上是否存在给定类的操作。班级列表API通过DOM元件，称为的属性公开这些方法和属性classList 。此属性的类型为DOMTokenList ，并且包含以下方法和属性：

add(class1, class2, ...) ：将一个或多个类添加到元素的类列表中。
contains(class) ：如果类列表包含给定参数，则返回true否则返回false 。
item(index) ：返回位置index处的类；如果数字大于或等于列表的长度，则返回null 。索引从零开始，这意味着第一类名称的索引为0。
length ：这是一个只读属性，它返回列表中的类数。
remove(class1, class2, ...) ：从元素的类列表中删除一个或多个类。
toString() ：以字符串形式返回元素的类列表。
toggle(class[, force]) ：从类列表中删除给定的类，并返回false 。如果该类不存在，则添加该类，然后该函数返回true 。如果提供了第二个参数，它将根据其真实性强制添加或删除该类。例如，将此值设置为true会导致添加类，而不管其是否已经存在。通过将此值设置为false ，将删除该类。

如果您熟悉jQuery，则可能会认为add()和remove()方法通过传递以空格分隔的类名列表（例如add("red bold bigger") ）对多个类执行相同的操作。。不是这种情况。要一次添加或删除更多类，您必须为每个类传递一个字符串（例如add("red", "bold", "bigger") ）。正如我指出的那样， toggle()方法具有一个可选参数，我们可以使用该参数来强制执行给定的操作。换句话说，如果toggle()的第二个参数为false ，则它用作remove()方法；如果第二个参数为true ，则它用作add()方法。

现在，我们已经描述了此API的方法和属性，下面让我们来看一下它的一些示例。假定页面上存在以下HTML元素，下面显示的每个代码示例都将执行一个操作。

<span id="element" class="description"></span>

新增课程

要将类名称“ red”添加到元素的class属性，我们可以编写以下内容：

document.getElementById('element').classList.add('red');
// class="description red"

要添加多个类，例如“ red”和“ bold”，我们可以这样编写：

document.getElementById('element').classList.add('red', 'bold');
// class="description red bold"

请注意，如果提供的类之一已经存在，则不会再次添加。

删除课程

要删除一个类，例如“ description”，我们将编写以下内容：

document.getElementById('element').classList.remove('description');
// class=""

要一次删除多个类，我们编写：

document.getElementById('element').classList.remove('description', 'red');
// class=""

请注意，如果不存在提供的命名类之一，则不会引发错误。

切换课程

有时我们需要根据用户交互或站点状态添加或删除类名称。这是使用toggle()方法完成的，如下所示。

document.getElementById('element').classList.toggle('description');
// class=""

document.getElementById('element').classList.toggle('description');
// class="description"

检索课程

classList API提供了一种根据类名在类列表中的位置来检索类名的方法。假设我们要检索元素的第一和第三类。我们将编写以下内容：

document.getElementById('element').classList.item(0);
// returns "description"

document.getElementById('element').classList.item(2);
// returns null

检索班数

尽管不是很常见，但在某些情况下，我们可能需要知道应用于给定元素的类的数量。 classList API允许我们通过length属性检索此数字，如下所示：

console.log(document.getElementById('element').classList.length);
// prints 1

确定是否存在类

有时我们可能想根据某个类的存在执行给定的动作。为了执行测试，我们以以下方式使用contains()方法：

if (document.getElementById('element').classList.contains('description')) {
   // do something...
} else {
   // do something different...
}

以字符串形式返回类列表

要以字符串形式返回类列表，我们可以使用toString()方法，如下所示。

console.log(document.getElementById('element').classList.toString());
// prints "description"

document.getElementById('element').classList.add('red', 'bold');
console.log(document.getElementById('element').classList.toString());
// prints "description red bold"

浏览器兼容性

除Internet Explorer之外，台式机和移动浏览器都广泛支持classList API。 IE从版本10开始就开始支持此API。更具体地说，您可以在Chrome 8 +，Firefox 3.6 +，Internet Explorer 10 +，Safari 5.1+和Opera 11.5+中使用此API。正如我们已经看到的，classList API非常简单，并且您可以猜到，对其进行填充并不困难。创建自己的polyfill应该很简单，但是如果您想要某些已经存在的东西，可以使用Eli Grey的classList.js 。

演示版

本部分提供了一个简单的演示，使您可以尝试本文中介绍的概念。演示页面包含两个基本字段：一个select元素，包含API公开的方法和属性，以及一个文本框，我们可以在其中编写要传递的参数。如您所见，该演示程序并未显式调用方法，而是使用了一个简单的技巧（使用JavaScript apply()方法），从而减少了代码行。由于某些浏览器不支持API，我们将执行检查，如果失败，则会显示消息“不支持API”。如果浏览器确实支持classList API，我们将为按钮的click事件附加一个侦听器，以便一旦单击该按钮，便会执行所选的方法。

此处提供了代码的实时演示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>ClassList API Demo</title>
    <style>
      body
      {
        max-width: 500px;
        margin: 2em auto;
        font-size: 20px;
      }

      h1
      {
        text-align: center;
      }

      .hidden
      {
        display: none;
      }

      .field-wrapper
      {
        margin-top: 1em;
      }

      #log
      {
        height: 200px;
        width: 100%;
        overflow-y: scroll;
        border: 1px solid #333333;
        line-height: 1.3em;
      }

      .button-demo
      {
        padding: 0.5em;
        margin: 1em;
      }

      .author
      {
        display: block;
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <h1>ClassList API</h1>

    <h3>Live sample element</h3>
    <div id="showcase">
      &lt;span id="play-element" class="description"&gt;&lt;/span&gt;
    </div>

    <h3>Play area</h3>
    <div>
      <div class="field-wrapper">
      <label for="method">Methods and Properties:</label>
        <select id="method">
          <option value="add">add()</option>
          <option value="contains">contains()</option>
          <option value="item">item()</option>
          <option value="length">length</option>
          <option value="remove">remove()</option>
          <option value="toString">toString()</option>
          <option value="toggle">toggle()</option>
        </select>
      </div>
      <div class="field-wrapper">
        <label for="parameter">Parameters (use spaces for multiple parameters):</label>
        <input type="text" id="parameter"></input>
      </div>

      <button id="execute" class="button-demo">Execute</button>
    </div>
    
    <span id="d-unsupported" class="hidden">API not supported</span>

    <h3>Log</h3>
    <div id="log"></div>
    <button id="clear-log" class="button-demo">Clear log</button>

    <span id="play-element" class="description"></span>

    <script>
      if (!'classList' in document.createElement('span')) {
        document.getElementById('c-unsupported').classList.remove('hidden');
        document.getElementById('execute').setAttribute('disabled', 'disabled');
      } else {
        var playElement = document.getElementById('play-element');
        var method = document.getElementById('method');
        var parameter = document.getElementById('parameter');
        var log = document.getElementById('log');
        var showcase = document.getElementById('showcase');

        document.getElementById('clear-log').addEventListener('click', function() {
          log.innerHTML = '';
        });

        document.getElementById('execute').addEventListener('click', function() {
          var message = method.value;

          if (method.value === 'length') {
            message += ': ' + playElement.classList[method.value]
          } else {
            var result = playElement.classList[method.value].apply(playElement.classList, parameter.value.split(' '));

            showcase.textContent = playElement.outerHTML;

            if (method.value === 'add' || method.value === 'remove' || method.value === 'toggle') {
              message += ' class "' + parameter.value + '"';
            } else {
              message += ': ' + result;
            }
          }
          
          log.innerHTML = message + '<br />' + log.innerHTML;
        });
      }
    </script>
  </body>
</html>

结论

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

在本文中，我们了解了classList API，其方法及其属性。如我们所见，该API帮助我们管理分配给给定元素的类-而且非常易于使用和。该API在台式机和移动浏览器中得到广泛支持，因此我们可以安全地使用它（必要时在polyfill的帮助下）。最后一点，不要忘了演示该示例，以更好地了解此API及其功能。

翻译自: https://www.sitepoint.com/exploring-classlist-api/

classlist

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
classlist_探索classList API

classlist 自从HTML的创建和第一个网站的诞生以来，开发人员和设计师就尝试自定义其页面的外观。这种需求变得如此重要，以至于创建了一个称为CSS的标准来正确管理样式并将其与内容分离。在当今高度互动的网站中，您通常需要添加，删除或切换类名（通常称为“ CSS类”）。从历史上看，处理JavaScript中的这些更改有些复杂，因为没有内置方法可以执行这些操作。在HTML5引入classL...
复制链接

扫一扫