原生js实现addClass,removeClass,hasClass方法

实现addClass、removeClass、hasClass方法，可以方便地向DOM元素添加/移除class样式，同时判断是否存在某个class样式。下面是实现这三个方法的完整攻略：

1. addClass方法实现

实现addClass方法，首先需要获取DOM元素，并向元素添加一个或多个class样式。可以使用classList属性，它返回一个类似数组的对象，该对象包含元素实际应用的class值。

具体实现代码如下：

/**
 * 添加class样式
 * @param {Object} el DOM元素
 * @param {String} cls class样式
 */
function addClass(el, cls) {
  if (!cls || !el) return;
  var classes = cls.split(" ");
  for (var i = 0, len = classes.length; i < len; i++) {
    var clsName = classes[i];
    if (!el.classList.contains(clsName)) {
      el.classList.add(clsName);
    }
  }
}

这里先判断传入的参数是否为空，然后将参数cls按空格分割成数组，循环遍历该数组，并判断元素是否已经存在class样式，若不存在则通过classList.add()方法添加class样式。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例1</title>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="title">Hello World</h1>
    <script>
      var title = document.getElementById("title");
      addClass(title, "red");
      addClass(title, "blue");
    </script>
  </body>
</html>

2. removeClass方法实现

实现removeClass方法，同样需要获取DOM元素，并从元素中删除一个或多个class样式。同样可以使用classList属性来获取元素实际应用的class值。

具体实现代码如下：

/**
 * 移除class样式
 * @param {Object} el DOM元素
 * @param {String} cls class样式
 */
function removeClass(el, cls) {
  if (!cls || !el) return;
  var classes = cls.split(" ");
  for (var i = 0, len = classes.length; i < len; i++) {
    var clsName = classes[i];
    if (el.classList.contains(clsName)) {
      el.classList.remove(clsName);
    }
  }
}

这里同样先判断传入的参数是否为空，然后将参数cls按空格分割成数组，循环遍历该数组，并判断元素是否存在class样式，若存在则通过classList.remove()方法移除class样式。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例2</title>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="title" class="red blue">Hello World</h1>
    <script>
      var title = document.getElementById("title");
      removeClass(title, "red");
    </script>
  </body>
</html>

3. hasClass方法实现

实现hasClass方法，也需要获取DOM元素，判断元素是否含有某个class样式。可以使用classList属性来获取元素实际应用的class值。

具体实现代码如下：

/**
 * 是否含有class样式
 * @param {Object} el DOM元素
 * @param {String} cls class样式
 * @returns {Boolean}
 */
function hasClass(el, cls) {
  if (!cls || !el) return false;
  return el.classList.contains(cls);
}

这里同样先判断传入的参数是否为空，然后使用classList.contains()方法判断元素是否存在class样式。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>示例3</title>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="title" class="red blue">Hello World</h1>
    <script>
      var title = document.getElementById("title");
      console.log(hasClass(title, "red")); // true
      console.log(hasClass(title, "green")); // false
    </script>
  </body>
</html>

通过以上方法的组合使用，可以方便地操作DOM元素的class样式，实现页面效果的动态变化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现addClass,removeClass,hasClass方法 - Python技术站