码迷,mamicode.com
首页 > 其他好文 > 详细

获取类名相关

时间:2017-04-24 17:20:54      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:span   nbsp   dom节点   ace   blog   调用   类集   replace   set   

  JS中获取DOM节点的类有3种方法:

1、classList

  H5的方法,仅兼容IE10+,配套带有remove等api

2、getAttribute(‘class‘)

  据说在低版本IE有兼容问题,建议用方法3

3、className

  这个方法万能

  

  其实要讲的是看到vue源码里面的一个方法,兼容IE9一个对类进行操作的方法。

  记下来以后用。

// DOM节点与要删除的类
function removeClass(el, cls){
  // 这里已经对cls调用了trim()方法
  if(!cls || !cls = cls.trim()){
    return ;
  }
  // classList兼容IE10+
  // 如果支持 直接按空格分割字符串并调用remove方法删除类
  if(el.classList){
    if(cls.indexOf(‘ ‘) > -1){
      cls.split(/\s+/).forEach(function(c){ return el.classList.remove(c); });
    } else{
      el.classList.remove(cls);
    }
  } 
  // 对IE10以下做兼容 不知道为啥不用className
  else{
    // 修正类集合字符串 两边加空白
    // ‘a b‘ => ‘ a b ‘
    var cur = ‘ ‘ + (el.getAttribute(‘class‘) || ‘‘) + ‘ ‘;
    // 修正目标类 ‘a‘ => ‘ a ‘
    var tar = ‘ ‘ + cls + ‘ ‘;
    // 进行替换 ‘ a b ‘ => ‘ b ‘
    while(cur.indexOf(tar) >= 0){
      cur = cur.replace(tar, ‘ ‘);
    }
    // 再调用trim()操作 ‘ b ‘ => ‘b‘
    el.setAttribute(‘class‘, cur.trim());
  }
}

 

获取类名相关

标签:span   nbsp   dom节点   ace   blog   调用   类集   replace   set   

原文地址:http://www.cnblogs.com/QH-Jimmy/p/6757502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!