原生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字典探测用户名工具
Oct 05 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
javascript基础知识讲解
Jan 11 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JavaScript定时器使用方法详解
Mar 26 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
短波的认识
2021/03/01 无线电
基于PHP文件操作的详细诠释
2013/06/21 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
详谈javascript中的cookie
2015/06/03 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
python实现查询IP地址所在地
2015/03/29 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python字符串常用方法
2018/06/14 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
毕业自我鉴定总结
2014/03/24 职场文书
党组织公开承诺书
2014/03/29 职场文书
药剂专业求职信
2014/06/20 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python