内容来自百度搜索

//判断样式是否存在

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. Gitlab_ansible_jenkins三剑客②Gitlab的后台管理

    系统信息和日志 健康状态 使用gitlab的用户管理和审批功能 创建用户 创建一个lead普通账号 进入test-repo仓库 这样就把dev添加到了test-repo这个项目中,并且有了develo ...

  2. Java_File类

    File类以抽象的方式代表文件名和目录路径.该类主要用于文件和目录的创建.查找.删除等.先来看一下File的构造方法: // 通过将给定的路径名字符串转换为抽象路径名来创建新的 File实例 File ...

  3. Mac上重置mysql 5.7密码

    Mac上重置mysql 5.7密码 >我的mac系统是osx 10.12 装完mysql5.7之前根本登录不上,网上说用DMG方式装完后,后弹出一个框,上面会有临时密码,但是我安装的时候却手一抖 ...

  4. python数据类型之基础进阶

    一: 解构 1.1 结构字符串 变量和字符个数必须严格一致 name = 'wc' a,b=name print(a) print(b) # w # c name = 'w' a,b=name pri ...

  5. 客户端和浏览器都不能连接SVN服务器

    错误提示 1.在对话框中提示 2.在As上提示 Error:svn: E731001: Unable to connect to a repository at URL 'https://XXX/sv ...

  6. python的学习之路(二)

    1.字符串内置功能练习#!/usr/bin/env python# *_*coding:utf-8 *_*# Author: harsonname = 'harson'name =str('harso ...

  7. 网络安装Centos x64 6.10

    1.下载老毛桃PE最新增强版本,然后生成一个可启动U盘. 2.在U盘或移动硬盘中创建一个目录 MYEXT,然后把centos的安装iso放到里面. 3.引导选择从外置ISO进行安装. https:// ...

  8. Mybatis 源码学习系列

    前言 很久以前,我们学习了Java,从一个控制台的 Hello world .开始,我们进入了面向对象的世界. 然后由学习了SQL语言,可以写出SQL语句来将尘封在硬盘之下的数据库数据,展现出来. 后 ...

  9. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  10. https和http 调用过程中请求头 referrer 获取不到的问题

    HTTP协议规定: Clients SHOULD NOT include a Referer header field in a (non-secure) HTTP request if the re ...