原生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 ...
随机推荐
- 01pxc集群的部署
尽可能的控制pxc集群的规模,pxc集群节点越多,数据同步的速度就越慢 所有pxc节点的硬件配置最好相同,pxc集群数据同步的速度取决于配置最低的节点 Pxc集群只支持innodb引擎 安装pxc集群 ...
- 【MySQL】MySQL基础操作语句
mysql基础操作语句,包括数据库的增.删.切换,以及表的增.删.改.查.复制. 创建数据库 mysql> create database tem; 使用数据库 mysql> use te ...
- 一篇文章搞懂Android组件化
网上组件化的文章很多,我本人学习组建化的过程也借鉴了网上先辈们的文章.但大多数文章都从底层的细枝末节开始讲述,由下而上给人一种这门技术“博大精深”望而生畏的感觉.而我写这篇文章的初衷就是由上而下,希望 ...
- Error occurred during initialization of VM Incompatible initial and maximum heap sizes specified
双击Tomcat server在eclipse弹出的Tomcat配置项里面选择open launch configuration 选择arguments在 vm arguments 里面添加 -Xms ...
- 关于element-ui表单验证(自定义验证规则)
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-widt ...
- 处理 oracle 数据库导入报错“IMP-00058: 遇到 ORACLE 错误 942”
在导入数据文件的时候出现了下图错误: 经过多次百度搜索问题.得知问题错误方向: 仔细的查询了被导入数据的数据库的版本: 而 被导入的数据包 dmp 文件是从 oracle11g r2的版本导出的. 所 ...
- SpringBoot整合Swagger测试api构建
@Author:SimpleWu 什么是Swagger? Swagger是什么:THE WORLD'S MOST POPULAR API TOOLING 根据官网的介绍: Swagger Inspec ...
- python3 切片
一.切片的目的:获取多个元素 能够进行切片的对象有:字符串.列表.元组 语法: object[start_index:end_index:step] 以下是创建一个列表 a = [0,1,2 ...
- Zabbix (五)
介绍添加主机时,各个参数的含义 https://blog.51cto.com/5001660/2154692 Zabbix配置介绍: https://blog.51cto.com/5001660/21 ...
- swagger.net 使用nginx 代理时出现端口号导致出错
1:当我们通过nginx代理访问时,由于nginx配置了映射到的一个站点为端口为127.0.0.1:6201,导致访问swagger接口时出现增加端口号,如下截图,这样就导致整个swagger无法使用 ...