js中class操作的工具方法

Alice_66

已于 2024-01-13 15:46:59 修改

阅读量373

点赞数 9

文章标签： javascript vue.js 前端

于 2024-01-13 15:46:40 首次发布

本文链接：https://blog.csdn.net/elena_705/article/details/135571268

版权

是否存在某个 class

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return reg.test(el.className);
}

添加class

export function addClass(el, className) {
  if (hasClass(el, className)) {
    return;
  }
  let curClass = el.className.split(' ');
  curClass.push(className);
  el.className = curClass.join(' ');
}

删除class

export function removeClass(el, className) {
  if (!hasClass(el, className)) {
    return;
  }

  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
  el.className = el.className.replace(reg, ' ');
}

切换class

export function toggleClass(el, className) {
  if (hasClass(el, className)) {
     let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
  	 el.className = el.className.replace(reg, ' ');
  } else {
    let curClass = el.className.split(' ');
    curClass.push(className);
    el.className = curClass.join(' ');
  }
}