原生js实现增加（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>
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法的更多相关文章
- 原生JS实现增加删除class
<!DOCTYPE html> <html> <head> <style type="text/css"> .night-mode{ ...
- jquery与原生JS实现增加、减小字号功能
预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 原生js 实现jquery addClass,removeClass
代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...
- jQuery属性--addClass()和removeClass()
addClass(class|fn) 概述 为每个匹配的元素添加指定的类名 参数 class 一个或多个要添加到元素中的CSS类名,请用空格分开: function(index, class) ...
- Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js
1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- React事件处理和原生JS事件处理
1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
随机推荐
- 2013学习总结----JavaScript
javascript面向对象,实现的几种方式 1:直接使用JSON对象 var o1={ "a":1, "b":2, "c":functio ...
- 初次接触mootools
以下是今天所学代码,网上有这篇博客可供参考,另外还是推荐官方文档 ,以下是今天所敲代码: //用mootools创建类的方式: //方式1:用标准方式传入一个对象字面量 /* var Person = ...
- COMMIT WORK AND WAIT 是在WAIT什么
wait 还是不wait,这是个问题. 这是同步更新还是异步更新的问题:如果是只commit work,是异步更新,触发注册在当前SAP LUW中所有数据更新动作,数据更新动作由SAP的更 ...
- For循环语句的使用
一.For循环语句 说明:For循环用于循环次数已经确定的情况下. 格式:for(循环变量赋初值; 循环条件; 循环变量增值) { ·····语句 } 举例:求 ...
- 安卓第十一天笔记-Intent与inter-filter配置
安卓第十一天笔记-Intent与inter-filter配置 Intent与inter-filter配置 1.Intent对象简述 Android应用中有包含三种重要组件:Activity,Servi ...
- IOS 杂笔－18 (let 与 var)
var 是 variable的缩写形式,是变量的意思 ,是可改变的,并不是数据类型. let 是常量的意思,不可改变的.
- 【原】iOS动态性(一)：动态添加属性的方法——关联(e.g. 向Category添加属性)
想到要如何为所有的对象增加实例变量吗?我们知道,使用Category可以很方便地为现有的类增加方法,但却无法直接增加实例变量.不过从Mac OS X v10.6开始,系统提供了Associative ...
- IOS之UI -- UITableView -- 1 -- 相关初识
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- PHP错误日志控制(display_errors和error_reporting)
display_errors和error_reporting是php程序调试过程中两个非常重要的参数,下面就来介绍一下这两个错误日志的配置如何开启和关闭: 我们知道在产品的生产环境肯定是不能够显示错误 ...
- 利用File类过滤器列出目录下的指定目录或文件
需求:列出d盘下的全部txt文件 实现方法:利用File类的过滤器功能 package com.test.common.util; import java.io.File; import java.i ...