zoukankan      html  css  js  c++  java
  • js实现类名的添加与移除

    方法1:使用className属性;

    方法2:使用classList API; 

    //用于匹配类名存在与否
    function reg(name){
        return new RegExp('(^|\s)'+name+'(\s+|$)');
    }
    
    //hasClass addClass removeClass toogleClass
    var hasClass,addClass,removeClass;
    if('classList' in document.documentElement){
        hasClass = function(obj, cname) {        // obj为要操作的元素对象,cname是类名
            return obj.classList.contains(cname);
        };
        addClass = function(obj, cname) {
            obj.classList.add(cname);
        };
        removeClass = function(obj,cname) {
            obj.classList.remove(cname);
        };
        toggleClass = function(obj, cname) {
            obj.classList.toggle(cname);
        };
    }else{
        hasClass = function(obj, cname) {
            return reg(cname).test(obj.className);
        };
        addClass = function(obj, cname) {
            if(!hasClass(obj,cname)){
                obj.className=obj.className+' '+cname;    
            }
        };
        removeClass = function(obj, cname) {
            obj.className=obj.className.replace(reg(cname),' ');
        };
        toggleClass = function(obj, cname) {
            var toggle=hasClass(obj,cname)?removeClass:addClass;
            toggle(obj,cname);
        };
    }
    
    //true
    document.body.classList.toString() === document.body.className;

    注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。

    所以扩展一下:

    //addClass
    DOMTokenList.prototype.addClass = function(str) {
      tts.split(' ').forEach(function(c){
        this.add(c);
      }.bind(this));
      return this;
    }
    
    //removeClass
    DOMTokenList.prototype.removeClass = function(str) {
      tts.split(' ').forEach(function(t){
        this.remove(t);
      }.bind(this));
      return this;
    }
    
    //removeClass
    DOMTokenList.prototype.toggleClass = function(str) {
      tts.split(' ').forEach(function(t){
        this.toggle(t);
      }.bind(this));
      return this;
    }
  • 相关阅读:
    Hive之安装
    python3常用内置方法(持续更新中。。。)
    CentOS7下安装Python3及Pip3并保留Python2
    一个爬取52破解的全部帖子地址的简单爬虫
    在windows写入文件中遇到 UnicodeEncodeError: ‘gbk’ codec can’t encode character 错误的解决办法
    我的vim配置
    树莓派命令行模式调整音量
    树莓派更改软件源
    linux连接wifi
    给树莓派挂载移动硬盘或U盘
  • 原文地址:https://www.cnblogs.com/colima/p/6268989.html
Copyright © 2011-2022 走看看