内容来自百度搜索

//判断样式是否存在

function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
//为指定的dom元素添加样式
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
//删除指定dom元素的样式
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}
//如果存在(不存在),就删除(添加)一个样式
function toggleClass(ele,cls){ 
    if(hasClass(ele,cls)){ 
        removeClass(ele, cls); 
    }else{ 
        addClass(ele, cls); 
    } 
}
//调用
function toggleClassTest(){ 
    var ele = document. getElementsByTagName('body')[0]; 
    toggleClass(ele,"night-mode"); 
} 

原生js实现删除class和添加class的更多相关文章

  1. 原生js怎么删除一个 div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【学习】原生js学习笔记1:添加class和使input为不可用

    <input type="checkbox" id="new_check" onChange="noUse()" checked> ...

  3. 原生js代码挑战之动态添加双色球

    var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...

  4. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  5. jQuery和原生JS的对比

    原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...

  6. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  9. 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

随机推荐

  1. ESP8266莫名重启或者死机问题

    多半是内存使用不当 1. 如果你要用很大长度的数组,那么可以换用更小的数据类型.比如,int值要占用两个字节,你可以用byte(只占用一个字节)代替:    2. esp8266有时会莫明重启,大部分 ...

  2. 【java】Java组件概览(2)— 基本库

    1.Math Math相关的库包括包括浮点库(java.lang.Math和java.lang.StrictMath)和任意精度数学(java.math包). (1)java.lang.Math 该类 ...

  3. 2141:2333(zznuoj)

    2141: 2333 时间限制: 1 Sec  内存限制: 128 MB提交: 77  解决: 17[提交] [状态] [讨论版] [命题人:admin] 题目描述 “别人总说我瓜,其实我一点也不瓜, ...

  4. 键盘keyCode值

    参考地址: https://blog.csdn.net/qq_25835645/article/details/78788987

  5. 微信H5支付开发(maven仓库版)

    官方文档:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 开发之前确认开通了H5支付功能 一.安装微信sdk 二.创建config ...

  6. 编译php-5.3.28

    1. 下载php-5.3.28 2. 编译/安装 ./configure --prefix=/usr/local/php --enable-fpm --enable-maintainer-zts -- ...

  7. elasticsearch 学习

    docker run -p : -d elasticsearch #直接拉取运行 #指定条件搜索curl --request GET \ --url 'http://localhost:9200/im ...

  8. Angular动画

    Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...

  9. Angular 任务列表页

    新建一个任务Module $ ng g m task 功能:项目列表显示,增加,修改,删除项目.邀请其它人员加入项目. 单一性原则:希望搭建多个组件,每个组件负责自己的功能. 一.task相关组件 $ ...

  10. 台达PLC modbus 不支持04功能码

    如果有04功能码的通讯,需要使用RS指令