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

最新推荐文章于 2024-10-11 08:29:48 发布

虚年

最新推荐文章于 2024-10-11 08:29:48 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_37068028/article/details/78336375

版权

JavaScript 专栏收录该内容

76 篇文章 1 订阅

订阅专栏

原生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, " ");
    }
  }
}