原生JavaScript来实现对dom元素class的操作方法(推荐)


Posted in Javascript onAugust 16, 2017

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>

以上就是小编为大家整理的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家继续支持三水点靠木~~

Javascript 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
js constructor的实际作用分析
Nov 15 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
微信小程序删除处理详解
Aug 16 #Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 #Javascript
微信小程序实现根据字母选择城市功能
Aug 16 #Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
17个Python小技巧分享
2015/01/23 Python
Zabbix实现微信报警功能
2016/10/09 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
致跳远、跳高运动员广播稿
2014/01/09 职场文书
毕业证丢失证明
2014/01/15 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
小学运动会班级口号
2014/06/09 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫