内容来自百度搜索

//判断样式是否存在

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. caffe服务器搭建血泪记录

    装过很多次caffe了,但这个还是遇到了很多奇葩问题,不过以前都是在ubuntu上,这次是在centos上. 1.import error  _caffe.so: undefined symbol: ...

  2. NPM修改默认全局安装路径

    有段时间没用npm了,昨天打算用vue-cli来新建个项目,yarn global add @vue/cli 之后,粗大事了.vue命令不可用,显示未安装.各种折腾,后来发现问题所在,今天写出来,一方 ...

  3. JAVA -数据类型与表达式---变量与赋值

    变量 程序中所管理的大部分信息,都是用变量表示的.下面讨论如何在程序中声明和使用变量. 变量(variable)代表保存数据的内存单元,变量名是内存单元的符号地址.变量声明要求编译器分配足够大的内存单 ...

  4. 给没有连接因特网的centos使用yum安装其他软件。

    在centos上,使用yum安装软件很方便,比如安装gcc,java等, 但是在没有网络的情况下呢? 我之前就碰到过这么一个问题,在一个没有外网的环境内,我需要安装GCC等工具, 然后有人推荐我先去其 ...

  5. Ubuntu16.04安装cuda9.0+cudnn7.0

    Ubuntu16.04安装cuda9.0+cudnn7.0 这篇记录拖了好久,估计是去年6月份就已经安装过几遍,然后一方面因为俺比较懒,一方面后面没有经常在自己电脑上跑算法,比较少装cuda和cudn ...

  6. Python 实现整数线性规划:分枝定界法(Branch and Bound)

    今天做作业,要实现整数线性规划的分枝定界法算法.找了一些网上的博客,发现都很屎,感觉自己写的这个比较清楚.规范,所以在此记录.如有错误,请指正. from scipy.optimize import ...

  7. golang channel string 信号乱码

    原因golang代码编写是允许在同一个for select代码结构中使用相同的变量名,这样会造成运行时chan发送的内容出现乱码现象,乱码率大概在98%左右,所以这是一个坑,希望大家别重复踩坑.以下是 ...

  8. Codeforces 959F Mahmoud and Ehab and yet another xor task 线性基 (看题解)

    Mahmoud and Ehab and yet another xor task 存在的元素的方案数都是一样的, 啊, 我好菜啊. 离线之后用线性基取check存不存在,然后计算答案. #inclu ...

  9. JS实现排序算法

    代码如下: 1.冒泡排序 <script> var arr = [9, 8, 7, 5, 7, 1, 45, 12, 7, 74, 4]; for (var i = 0; i < a ...

  10. python no module named _socket 原因

    python no module named _socket 原因 Lib/site-packages 不在 sys.path 中