jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

在此写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

<style type="text/css">

    div.testClass{

        background-color:gray;

    }

</style>  

<script type="text/javascript">

function hasClass(obj, cls) {

    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

}  

function addClass(obj, cls) {

    if (!this.hasClass(obj, cls)) obj.className += " " + cls;

}  

function removeClass(obj, cls) {

    if (hasClass(obj, cls)) {

        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

        obj.className = obj.className.replace(reg, ' ');

    }

}  

function toggleClass(obj,cls){

    if(hasClass(obj,cls)){

        removeClass(obj, cls);

    }else{

        addClass(obj, cls);

    }

}  

function toggleClassTest(){

    var obj = document. getElementById('test');

    toggleClass(obj,"testClass");

}

</script>  

<body>

    <div id = "test" style = "width:250px;height:100px;">

        sssssssssssss

    </div>

    <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />

</body>

　　

原生JS实现addClass,removeClass,toggleClass的更多相关文章

  1. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

  4. 浅析原生js模仿addclass和removeclass

    //判断有没有class hasClass(elements, cName) { return !!elements.className.match(new RegExp("(\\s|^)& ...

  5. class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  6. class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  7. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  8. .addClass(),.removeClass(),.toggleClass()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

  9. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

随机推荐

  1. 网易云课堂-spark

    ==============================Flink比spark优秀,但既生瑜何生亮,所以Flink没火起来 为了使用sortbykey,需要RDD的元素是key-value的形式 ...

  2. WIN10登录时找不到Administrator用户

    前提:WIN才安装的系统登录时只看到admin用户看不到administrator用户 1. 按网上方法,进入[此电脑]--[管理]--[系统工具]--[本地用户和组]--[用户] 2. 双击打开Ad ...

  3. 1、python同级目录及子目录模块引入

    2个模块在同一个包内时(即引入和被引入的2个py文件在同一个目录下),直接引入模块名 1.引入与被引入模块或包在同一目录下时,直接引入模块名或者包名import modulename.py或者impo ...

  4. java 集合（四）HashSet 与 LinkedHashSet

    查看源码: HashSet底层new 了HashMap 哈希表的结构: Demo: package cn.sasa.demo2; import java.util.HashSet; import ja ...

  5. redis设置bind

    1>注释掉bind #bind 127.0.0.1 2>默认不是守护进程方式运行,这里可以修改 daemonize no 3>禁用保护模式 protected-mode no 启动R ...

  6. Python 字符串常用方法总结

    明确:对字符串的操作方法都不会改变原来字符串的值 1,去掉空格和特殊符号 name.strip()  去掉空格和换行符 name.strip('xx')  去掉某个字符串 name.lstrip()  ...

  7. javax.lang.model Implementation Backed by Core Reflection

    javax.lang.model Implementation Backed by Core Reflection 1.javax.lang.model: How do I get the type ...

  8. Linux中程序开机自启

    Linux中程序开机自启 https://www.itbulu.com/debian-ubuntu-rclocal.html

  9. linux dmesg 查看系统故障信息

    dmesg 可以查看linux 内核信息 dmesg’命令设备故障的诊断是非常重要的.在‘dmesg’命令的帮助下进行硬件的连接或断开连接操作时,我们可以看到硬件的检测或者断开连接的信息.‘dmesg ...

  10. push到Git时常见的失败

           之前学用git的时候,不想记命令,总是gui和bash交互的用,但是发现总出现push失败的问题,用gui来fetch的时候,显示下拉成功,但事实上并没有,这时候得在bash上用命令来下 ...