原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>addclass,removeclass,hasclass,toggleclass,getbyclass</title>
</head>
<body>
<div class="div1" id="box1"></div>
<input type="button" value="按钮" id="btn1"/>
<script>
function addClass(obj,cls) {//obj:要添加classname的元素，cls:要添加的classname;
//如果原来没有class：
if(obj.className == ''){
obj.className = cls;
} else {
//本来已经有class，新增class的情况：
var arrclassname = obj.className.split(' ');//
var index = arrIndexOf(arrclassname,cls);
if(index == -1) {
//如果要添加的class在原来的元素上不存在：
obj.className += ' ' + cls;
}
}
} function arrIndexOf(arr,v){//检测数组中是否有相同的值存在，并且返回它的位置；
for(var i=0;i<arr.length;i++){
if(arr[i] == v){
return i;
}
}
return -1;
} function removeClass(obj,cls){
//如果有class的话：
if(obj.className != ''){
var arrClassName = obj.className.split(' ');//对原有class进行拆分，看看是否包含需要移除的class，也就是传参cls的classname；
var index = arrIndexOf(arrClassName,cls);
//r如果有需要移除的class
if(index != -1){
arrClassName.splice(index,1);
obj.className = arrClassName.join('');
}
}
} function hasClass(obj,cls){
var cls = cls || '';
if( cls.replace(/\s/g,'').length == 0){
return false;//当cls没有参数时,返回false;
}else{
return new RegExp(' ' + cls + '').test(' ' + obj.className);
}
} function toggleClass(obj,cls){
hasClass(obj,cls) ? removeClass(obj,cls) : addClass(obj,cls);
} function getByClass(oParent, sClass) {
if (oParent.getElementsByClassName) {
return oParent.getElementsByClassName(sClass);
} else { //IE 8 7 6
var arr = [];
var reg = new RegExp('\\b' + sClass + '\\b');
var aEle = oParent.getElementsByTagName('*');
for (var i = 0; i < aEle.length; i++) {
if (reg.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
} var oBtn1 = document.getElementById('btn1');
var oBox1 = document.getElementById('box1');
oBtn1.onclick = function () {
if( hasClass(oBox1,'div1') ){
alert('hasclass');
}; alert( getByClass(document,'div1').length );
} </script> </body>
</html>
原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass的更多相关文章
- jQuery的addClass,removeClass和toggleClass方法
jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...
- 原生js 用正则实现removeclass hasclass getsclass addclass .
function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsB ...
- 原生js实现addClass,removeClass,hasClass方法
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...
- 原生js 实现jquery addClass,removeClass
代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...
- 原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在 ...
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
随机推荐
- HDU 5775 树状数组
Bubble Sort Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- UVa 1586 Molar mass --- 水题
UVa 1586 题目大意:给出一种物质的分子式(不带括号),求分子量.本题中分子式只包含4种原子,分别为C.H.O.N, 原子量分别为12.01,1.008,16.00,14.01 解题思路:先实现 ...
- AFN网络状态的时时监控以及网络的判断、
//3.判断网络状况 AFNetworkReachabilityManager *netManager = [AFNetworkReachabilityManager sharedManager ...
- <初级程序员> git 的初级使用
作为程序员,Git 是一个很好的代码管理工具.Git 是一个版本控制系统,主要的作用就是记录代码的修改过程,有效的追踪文件的变化.当代码出现错误的时候可以很容易的恢复到之前的状态,不管对于个人开发还是 ...
- 论文笔记之：Semi-Supervised Learning with Generative Adversarial Networks
Semi-Supervised Learning with Generative Adversarial Networks 引言:本文将产生式对抗网络(GAN)拓展到半监督学习,通过强制判别器来输出类 ...
- DEBUG MYSQL
https://dev.mysql.com/doc/refman/5.7/en/porting.html https://dev.mysql.com/doc/refman/5.7/en/debuggi ...
- Unity3D的杂记
刷新帧的不同控制函数 FixedUpdate 可以多次调用: 不饿能用于帧频很高的情况: Update 仅一次调用(每帧): LateUpdate 每帧调用一次: Corountine 用startC ...
- MARKDOWN--介绍http://www.jianshu.com/p/q81RER
简 注册登录 添加关注 作者 简书2013.04.22 22:02* 写了267022字,被8398人关注,获得了9900个喜欢 献给写作者的 Markdown 新手指南 字数1600 阅 ...
- 二十四种设计模式：组合模式(Composite Pattern)
组合模式(Composite Pattern) 介绍将对象组合成树形结构以表示"部分-整体"的层次结构.它使得客户对单个对象和复合对象的使用具有一致性.示例有一个Message实体 ...
- C# 中的EventHandler
//这里定义了一个水箱类 public class 水箱 { //这是水箱的放水操作 public void 放水() { } //这是水箱的属性 public dou ...