原生js实现addclass,removeclass,toggleclasss实例


Posted in Javascript onNovember 24, 2016

jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

在此写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在),就删除(添加)一个样式
4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

<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>

以上就是小编为大家带来的原生js实现addclass,removeclass,toggleclasss实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
纯javascript版日历控件
Nov 24 #Javascript
js通过classname来获取元素的方法
Nov 24 #Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 #Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
You might like
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php获取根域名方法汇总
2014/10/28 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js脚本实现数据去重
2014/11/27 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JS之相等操作符详解
2016/09/13 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
大学生军训自我评价分享
2013/11/09 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
房产委托公证书样本
2014/04/04 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
弄虚作假心得体会
2014/09/10 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript