原生JS实现addClass,removeClass,toggleClass
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,toggleClass的更多相关文章
- 原声js实现addClass removeClass toggleClass效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现addClass,removeClass,hasClass方法
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- 浅析原生js模仿addclass和removeclass
//判断有没有class hasClass(elements, cName) { return !!elements.className.match(new RegExp("(\\s|^)& ...
- class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- addClass, removeClass, toggleClass（从jquery中抠出来）
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- .addClass(),.removeClass(),.toggleClass()的区别
.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
随机推荐
- TFA（Trace File Analyzer）的安装与使用（ORACLE版本12C）
TFA是Oracle从11.2版本开始推出的一种类似diagcollection的一个oracle 集群日志收集器,而且TFA比diagcollection集中和自动化的诊断信息收集能力更强大.TFA ...
- Javascript 面向对象编程（一）：封装 作者：yuan一峰
学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大 ...
- 洛谷 P3684 机棚障碍Hangar Hurdles [CERC2016] 图论
正解: 解题报告: 传送门! 首先不难想到这题主要有两个问题需要解决,一个是预处理出各个点的箱子半径最大值,一个是求ans 然后分别港下QwQ 首先关于预处理要说下昂 预处理有三种方法,分别港下 第一 ...
- 转： js实现全角半角检测的方法
//全角半角校验 function issbccase(strTmp) { for (var i=0; i<strTmp.length; i++) { if (strTmp.charCodeAt ...
- spring学习(01)之IOC
spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...
- Java高频面试题
网络相关 1.http1.0和http1.1的区别? http1.0每次请求都需要和服务器建立一个TCP连接,服务器完成请求后立即断开TCP连接. http1.1支持长连接,客户端在http请求头上加 ...
- react native touchable
<Button style={{marginTop: 30}} onPress={() => { Alert.alert("你点击了按钮!"); }} onPressI ...
- MySQL复制异常大扫盲：快速溯源与排查错误全解
MySQL复制异常大扫盲:快速溯源与排查错误全解https://mp.weixin.qq.com/s/0Ic8BnUokyOj7m1YOrk1tA 作者介绍王松磊,现任职于UCloud,从事MySQL ...
- Delphi避免重复打开窗体
取消自动创建窗体 Form1关键代码 implementation uses Unit2; {$R *.dfm} procedure TForm1.Button1Click(Sender: TObje ...
- 008-js中的正则表达式
查看地址:http://www.runoob.com/js/js-regexp.html 一.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.reg ...