原生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类名,请用空格分开 ...
随机推荐
- ZOJ 1107 FatMouse and Cheese
原题链接 题目大意:FM在一个街道n*n街道的(0,0)点,在每个网格里放着cheese,他要尽可能多的吃这些cheese.有两个规则:1)他跑的总距离不能超过k步:2)下一个节点的cheese的块数 ...
- 解决Volley请求网络数据返回的数据乱码
本人可参考http://tieba.baidu.com/p/4039693566 以往一般我们如下写就可以了 StringRequest request=new StringRequest(url, ...
- html5的发展历程
20年磨一剑,HTML5作为下一代Web标准,她的语义之美.人性之美.简单之美.实用之美……如同一场革命,将Web从内容平台推向标准化的应用平台,并一统各在平台阵营的标准.2008年,HTML5发布首 ...
- leetcode 114 Flatten Binary Tree to Linked List ----- java
Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...
- NodeJS记录
https://nqdeng.github.io/7-days-nodejs/#3.3.4
- POI读取excel
HSSF是Horrible Spread Sheet Format的缩写 读取2007版本前 XSSF是XML Spread Sheet Format的缩写 读取2007版本后(包含2007)
- System.Diagnostics命名空间里的Debug类和Trace类的用途
在 .NET 类库中有一个 System.Diagnostics 命名空间,该命名空间提供了一些与系统进程.事件日志.和性能计数器进行交互的类库.当中包括了两个对开发人员而言十分有用的类--Debug ...
- shell之echo与printf和颜色
在用户的bashrc中添加一行export来修改提示符.
- nginx https http 共用
openssl genrsa -des3 -out banmaxiaozhen.com.key 1024 openssl req -new -key banmaxiaozhen.com.key -ou ...
- 2 TKinter绑定事件
通过command属性给button绑定事件 目的:点击一下按扭,在窗口中出现一行字 第一种方法(command): #!/usr/bin/env python # _*_ coding:utf-8 ...