原生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类名,请用空格分开 ...
随机推荐
- 2015GitWebRTC编译实录9
2015.07.20 neteq 编译通过注意不要引用tools目录里的内容 [1347/1600 ] CXX obj /webrtc/modules/audio_coding/neteq/neteq ...
- Container ViewController初探1
今天调试程序遇到个问题,iOS7下在弹出Modal的子界面时,弹出层次不对,键盘和界面被分割在了Window的两侧,导致显示异常Presenting view controllers on detac ...
- tomcat实现文件打开下载功能
omcat作为http的下载服务器,网上有很多办法 但我认为最简单的是: 1.直接把文件放在 tomcat6/webapps/ROOT 目录下, 2.然后在网址中访问: http://192.168. ...
- bsgrid
网址:http://bsgrid.oschina.mopaasapp.com/ var total = gridObj.options.totalRows; jquery必须放在bsgrid的前面 根 ...
- JavaScript学习记录总结（九）——移动添加效果
<!DOCTYPE html><html><head><title>moveOption.html</title> <meta nam ...
- timus 1022 Genealogical Tree(拓扑排序)
Genealogical Tree Time limit: 1.0 secondMemory limit: 64 MB Background The system of Martians’ blood ...
- Python 判断一个字符串是否在列表中任何一个字符串中出现过
strlist = ['a1', 'a2', 'b1'] if any("a" in s for s in strlist):
- ps调整图层
自然饱和度:自然饱和度命令和色相饱和度命令里的饱和度相比最大的区别是自然饱和度只增加未达到饱和的颜色的饱和度,而饱和度命令则增加整个图像的饱和度,可能会导致图像颜色过于饱和,而自然饱和度不会出现这种问 ...
- Choosing proper innodb_log_file_size
If you’re doing significant amount of writes to Innodb tables decent size of innodb_log_file_size is ...
- linux服务之httpd
http://mirrors.cnnic.cn/apache/httpd/docs/ 英文pdf文档下载 Apache HTTP Project’s goal It is the Apache HTT ...