// 判断class有无
function hasClass(ele, cls) {
if (ele) {
cls = cls || ''
if (cls.replace(/\s/g, '').length == 0) return false // 当cls没有参数时,返回false
return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ')
}
}
// 添加class
function addClass(ele, cls) {
if (!hasClass(ele, cls) && ele) {
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls
}
}
// 去除class
function removeClass(ele, cls) {
if (hasClass(ele, cls) && ele) {
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
ele.className = newClass.replace(/^\s+|\s+$/g, '');
}
}

JS实现hasClass addClass removeClass的更多相关文章

  1. hasClass addClass removeClass

    //函数有class function hasClass(ele,cls){ return -1<(" "+ele.className+" ").inde ...

  2. 原生js 实现jquery addClass,removeClass

    代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...

  3. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  4. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

  6. jquery 对svg 元素的addClass removeClass 支持

    jquery 2.2 之后才支持对svg 元素的addClass removeClass

  7. 原生js 用正则实现removeclass hasclass getsclass addclass .

    function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsB ...

  8. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

  9. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

随机推荐

  1. [翻译]扩展C#中的异步方法

    翻译自一篇博文,原文:Extending the async methods in C# 异步系列 剖析C#中的异步方法 扩展C#中的异步方法 C#中异步方法的性能特点. 用一个用户场景来掌握它们 在 ...

  2. PHP基本语句

    语句分支语句if语句if if.........elseif.......else if.....else if 的嵌套switch语句 循环语句 for 循环 函数 函数的4要素::返回类型,函数名 ...

  3. leetcode-easy-trees-Maximum Depth of Binary Tree

    mycode  92.69% # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x ...

  4. mysql 5.7安装方法

    yum方式安装rpm包形式,安装mysql的方法: 方法一: 使用yum方式,下载后离线安装mysql的安装包 安装前,先使用命令查看,确定系统未安装mysql安装包.彻底清除之前安装的mysql安装 ...

  5. OpenCV学习笔记(10)——图像梯度

    学习图像梯度,图像边界等 梯度简单来说就是求导. OpenCV提供了三种不同的梯度滤波器,或者说高通滤波器:Sobel,Scharr和Lapacian.Sobel,Scharr其实就是求一阶或二阶导. ...

  6. Python基本语法_运算符详解

    目录 目录 前言 软件环境 身份运算符 算术运算符 比较运算符 位移运算符 自变运算符 位运算符 逻辑运算符 成员关系运算符 Python真值表 最后 前言 在前面的博文介绍了Python的数据结构之 ...

  7. python 元组和数组

    参考:https://stackoverflow.com/questions/1708510/list-vs-tuple-when-to-use-each tuple(元组):不可变,不能添加.删除. ...

  8. char* a = "abc" 和 char a[] = "abc" 之间的区别

    char* a = "abc"; 声明了一个字符类型的指针a,并为它赋值初始值为"abc",a的值是字符串"abc"的首地址[第一个字符的地 ...

  9. vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

    在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...

  10. Angular5 父组件获取子组件实例( ViewChildren、ViewChild用法)

    原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件 ...