原生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类名,请用空格分开 ...
随机推荐
- 内部排序->插入排序->其它插入排序->2-路插入排序
文字描述 在折半插入排序的基础上进行改进, 另设一个和待排序序列L相同的数组D, 首先将L[1]赋值给D[0], 数组D中数据是已经排好序的, first指向最小值下标,final指向最大值下标.初始 ...
- LeetCode 637 Average of Levels in Binary Tree 解题报告
题目要求 Given a non-empty binary tree, return the average value of the nodes on each level in the form ...
- 《linux 字符处理》- grep/sort/uniq/tr/paste
一:基本 字符处理主要是文本的搜索和处理. 搜索也主要使用到了 管道 作为媒介. 二: grep 搜索文本 基本语法 * grep [-incv] ’文本’ 文件 * i 不区分大小写 * c 匹配行 ...
- 《linux 计划任务》- cron
一:什么是计划任务 - 你给手机定了一个闹钟,每天的 7:00 会准时响铃叫你起床,这实际上就是一个计划任务 - 所谓定时任务,就是在已经定好的特定时间去执行的事情. - Cron是一个[守护程序]用 ...
- 2018/03/08 每日一个Linux命令 之 chattr/lsattr
每日一个Linux命令 2018-03-08 Linux 命令 chattr/lsattr chattr [-参数] [+/-属性] [文件或者目录] 经过今天没有对铃,粥熬糊了,我就知道...... ...
- TMS WEB Core v1.2预览版：新的Electron应用程序支持
2019年2月20日,星期三 几个月前,我们已经开始与Electron进行实验.在工作概念验证之后,我们的目标是为Delphi开发人员尽可能多地包装Electron API.但当然不仅仅是可以使用的E ...
- InnoDB体系架构
MySQL支持插件式存储引擎,常用的存储引擎则是MyISAM和InnoDB,通常在OLTP(Online Transaction Processing 在线事务处理)中,我们选择使用InnoDB,所以 ...
- bat实现获取文件每行内容，for循环中运行多条命令
关键词:bat,bat获取文件内容 1.获取每行内容 @echo offfor /f "delims=" %%i in (config.txt) do (echo "%% ...
- 【剑指offer】把数组排成最小的数
一.题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 二.思路: ...
- jquery-ui 之dialog
1,引入css和js <script type="text/javascript" src="${ctx}/js/ytd/platform/zdjsDlbyqbh/ ...