原生js实现删除class和添加class
内容来自百度搜索
//判断样式是否存在
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的更多相关文章
- 原生js怎么删除一个 div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【学习】原生js学习笔记1:添加class和使input为不可用
<input type="checkbox" id="new_check" onChange="noUse()" checked> ...
- 原生js代码挑战之动态添加双色球
var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 分别使用原生js和jQuery添加/删除元素的class属性
一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
随机推荐
- 从头开始学gradle【各系统安装gradle】
所有的环境都是基于jdk1.8 java -version windows安装 下载对应的gradle.zip安装包,解压到指定文件即可,然后配置相应的环境变量即可使用 linux/mac 安装 mk ...
- JVM学习资料
java虚拟机学习-深入理解JVM(1) java虚拟机学习-慢慢琢磨JVM(2) java虚拟机学习-慢慢琢磨JVM(2-1)ClassLoader的工作机制 java虚拟机学习-JVM内存管理 ...
- iframe 加form提交数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mui slider禁止滑动
网上方法: mui('.mui-slider').slider().setStopped(true); 实际使用 mui('.mui-slider').slider().stopped = true; ...
- JSX的替代方案(译文)
原文链接:https://blog.bloomca.me/2019/02/23/alternatives-to-jsx.html JSX作为一种流行的模板语言,在各种框架都得到了广泛的应用.但是,如果 ...
- emacs Can't guess python-indent-offset, using defaults: 4
首先,这只是一个提示,Emacs 在打开python 文件时,如果是个空文件,会有此提示. 在python.el文件配置中,有如下代码: Python.el (defcustom python-ind ...
- C#冒泡法排序源码
如下内容内容是关于C#冒泡法排序的内容,应该对码农有一些用途. int[] myArray = new int[] { 10, 8, 3, 5, 6, 7, 4, 6, 9 }; for( int j ...
- Docker 的点点滴滴
Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...
- 异步简析之BlockingCollection实现生产消费模式
目前市面上有诸多的产品实现队列功能,比如Redis.MemCache等... 其实c#中也有一个基础的集合类专门用来实现生产/消费模式 (生产模式还是建议使用Redis等产品) 下面是官方的一些资料和 ...
- mysql存储过程游标使用
BEGIN DECLARE idCount int DEFAULT 0;-- 定义查询的id count DECLARE nameCount int DEFAULT 0;-- 统计相同名字合计 DEC ...