原生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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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自动跳转中英文页面
2008/07/29 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Python切片知识解析
2016/03/06 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
企业员工培训感言
2014/02/26 职场文书
颁奖典礼主持词
2014/03/25 职场文书
高三家长寄语
2014/04/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
考研英语复习计划
2015/01/19 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis