原生JavaScript操作CSS类名——hasClass,addClass,removeClass

最新推荐文章于 2023-01-31 23:09:39 发布

虚年

最新推荐文章于 2023-01-31 23:09:39 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_37068028/article/details/78336375

JavaScript 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了使用原生JavaScript来实现元素CSS类名的操作方法，包括验证元素是否包含指定类名、添加类名以及移除类名等功能。通过简单的函数实现，帮助开发者更好地理解和运用这些基本但实用的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JavaScript操作CSS类名className——hasClass,addClass,removeClass

验证当前元素是否包含className这个类名

function hasClass(curEle, className) {
  var reg = new RegExp("(^| +)" + className + "( +|$)");
  return reg.test(curEle.className);
}

给元素添加样式类名

function addClass(curEle, className) {
  var arr = className.replace(/(^ +| +$)/g, "").split(/ +/g); // 先去首尾空格，为了防止className为多个类名 "box1 box2"
  for (var i = 0,len=className.length; i < len; i++) {
    var curName = arr[i];
    if (!hasClass(curEle, className)) {
      curEle.className += " " + curName;
    }
  }
}

移除类名

function removeClass(curEle, className) {
  var arr = className.replace(/(^ +| +$)/g, "").split(/ +/g);
  for (var i = 0, len = className.length; i < len; i++) {
    var curName = arr[i];
    if (hasClass(curEle, curName)) {
      var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
      curEle.className = curEle.className.replace(reg, " ");
    }
  }
}