原生JavaScript来实现对dom元素class的操作方法(推荐)
时间:2019-03-31
本文章向大家介绍原生JavaScript来实现对dom元素class的操作方法(推荐),主要包括原生JavaScript来实现对dom元素class的操作方法(推荐)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery操作class的方式非常强大
写了一个利用原生js来实现对dom元素class的操作方法
1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在),就删除(添加)一个样式
4.hasClass:判断样式是否存在
下面为一toggleClass的测试例子
[html] view plain copy <style type="text/css"> div.testClass{ background-color:gray; } </style>
<script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } function toggleClass(obj,cls){ if(hasClass(obj,cls)){ removeClass(obj, cls); }else{ addClass(obj, cls); } } function toggleClassTest(){ var obj = document. getElementById('test'); toggleClass(obj,"testClass"); } </script>
<body> <div id = "test" style = "width:250px;height:100px;"> sssssssssssss </div> <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" /> </body>
以上就是小编为大家整理的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家继续支持脚本之家~~
- 事件处理需小心
- Mysql读写分离方案-MySQL Proxy环境部署记录
- Mysql读写分离方案-Amoeba环境部署记录
- linux系统终端命令提示符设置(PS1)记录
- 从MapX到MapXtreme2004[10]-根据zoom值修改显示范围
- Linq to Sql中Single写法不当可能引起的数据库查询性能低下
- 获得定长字符串
- vue2.0知识点汇总
- ie6,ie7,ff 的css兼容hack写法
- 使用子查询时应当注意的
- LegacyText的复制的Bug
- 提高WCF服务并发能力的简单处理办法
- 如何给已经有数据的DataTable动态增加一列并赋值
- Gitlab上采用rpm方式快速安装的操作记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go内存管理之代码的逃逸分析
- MySQL读锁的区别和应用场景分析
- Apache NIFI 讲解(读完立即入门)
- 了解NiFi最大线程池和处理器并发任务设置
- 深入理解 Apache NIFI Connection
- 【Go语言探险】线上奇怪日志问题的排查
- 探索 Apache NIFI 集群的高可用
- 面试被问:Spring Boot中Tomcat是如何启动的?
- Spring Boot 实现定时任务的动态增删启停等管理!
- Apache NIFI ExecuteScript组件脚本使用教程
- Redis必会的性能监控指标汇总
- 带你体验Apache NIFI新建数据同步流程(NIFI入门)
- Spring JPA 存储库接口定义
- 如何给Apache开源项目贡献代码
- 深入解析Apache NIFI的调度策略