编程 Javascript

原生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实例全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用于节点操作的API，颠覆原生操作HTML DOM节点的API

Dec 11 Javascript

IE与FireFox中的childNodes区别

Oct 20 Javascript

JavaScript italics方法入门实例（把字符串显示为斜体）

Oct 17 Javascript

关于延迟加载JavaScript

May 05 Javascript

JS实现两表格里数据来回转移的方法

May 28 Javascript

javascript实现3D切换焦点图

Oct 16 Javascript

原生js实现网易轮播图效果

Apr 10 Javascript

js以分隔符分隔数组中的元素并转换为字符串的方法

Nov 16 Javascript

关于javascript获取内联样式与嵌入式样式的实例

Jun 01 Javascript

判断iOS、Android以及PC端的示例代码

Nov 15 Javascript

微信小程序常用的3种提示弹窗实现详解

Sep 19 Javascript

react使用antd表单赋值,用于修改弹框的操作

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