设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 87|回复: 0

[实例分享] 原生JS实现addClass,removeClass,toggleClass

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2016-10-21 11:13:35 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
原生JS实现addClass,removeClass,toggleClass

jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.
在此写了一个利用原生js来实现对dom元素class的操作方法
1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在),就删除(添加)一个样式
4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子
  1. <style type="text/css">
  2.         div.testClass{
  3.                 background-color:gray;
  4.         }
  5. </style>

  6. <script type="text/javascript">
  7. function hasClass(obj, cls) {
  8.     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  9. }

  10. function addClass(obj, cls) {
  11.     if (!this.hasClass(obj, cls)) obj.className += " " + cls;
  12. }

  13. function removeClass(obj, cls) {
  14.     if (hasClass(obj, cls)) {
  15.         var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
  16.         obj.className = obj.className.replace(reg, ' ');
  17.     }
  18. }

  19. function toggleClass(obj,cls){
  20.         if(hasClass(obj,cls)){
  21.                 removeClass(obj, cls);
  22.         }else{
  23.                 addClass(obj, cls);
  24.         }
  25. }

  26. function toggleClassTest(){
  27.         var obj = document. getElementById('test');
  28.         toggleClass(obj,"testClass");
  29. }
  30. </script>

  31. <body>
  32.         <div id = "test" style = "width:250px;height:100px;">
  33.                 sssssssssssss
  34.         </div>
  35.         <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />
  36. </body>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-6 00:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表