内容来自百度搜索

//判断样式是否存在

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. docker简单介绍----docker仓库的应用

    docker hub:主要用来存储docker镜像的仓库 docker默认提供了一个docker仓库,我们也可以自建私有仓库或者使用第三方的docker仓库来pull或者push镜像 这里我们以阿里云 ...

  2. tensorflow--mnist注解

    我自己对mnist官方例程进行了部分注解,希望分享出来有助于入门选手更好理解tensorflow的运行机制,可以拷贝到IDE再调试看看,看看具体数据流向还有一部分tensorflow里面用到的库.我用 ...

  3. js数据结构与算法——队列

    <script> //创建一个队列 function Queue(){ let items = []; //向队尾添加一个新的项 this.enqueue = function(eleme ...

  4. 算法工程师<编程题>

    <编程题> 1.[Maximum Product Subarray 求最大子数组乘积] 这个求最大子数组乘积问题是由最大子数组之和问题演变而来,但是却比求最大子数组之和要复杂,因为在求和的 ...

  5. 解决exlipse下 springboot 错误:找不到或无法加载主类

    简单描述:控制台出现了下图 废话不多说,直接上解决办法: 方法一:如果你很有自信,自己的pom 没问题,并且已经加载了所有依赖的jar.ok,这是eclipse的问题,window=>prefe ...

  6. redis安装教程 windows环境

    redis开始入坑啦 安装: gayhub地址:https://github.com/MicrosoftArchive/redis/releases 我装的是win7 64系统  选了第二个 在E盘新 ...

  7. tomcat 网页管理tomcat

    一.设置管理员账户密码 进入tomcat安装目录 ->进入conf目录->修改user.xml->加入下面内容 模板 <role rolename="manager- ...

  8. mysql_config not found和error: command 'gcc' failed with exit status 1

    要想使python可以操作mysql 就需要MySQL-python驱动,它是python 操作mysql必不可少的模块. 下载地址:https://pypi.python.org/pypi/MySQ ...

  9. ansible理解

    目录 inventory文件 patterns 模块 ansible配置文件 PlayBook使用 inventory文件 [cassandra:children] shcp-01 shcp-06 b ...

  10. JSON字符串自动转换

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObj ...