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. iOS中Block的用法，举例，解析与底层原理（这可能是最详细的Block解析）

    1. 前言 Block:带有自动变量(局部变量)的匿名函数.它是C语言的扩充功能.之所以是拓展,是因为C语言不允许存在这样匿名函数. 1.1 匿名函数 匿名函数是指不带函数名称函数.C语言中,函数是怎 ...

  2. AWS学习笔记

    VPC :虚拟局域网 EC2 :虚拟机 RDS :关系型数据库的管理平台 ElasticCache: 缓存系统的管理平台 ELB :可伸缩的负载均衡(私有子网中的web服务通过elb暴露到公网中) A ...

  3. disruptor的并行用法

    实现EventFactory,在newInstance方法中返回,ringBuffer缓冲区中的对象实例:代码如下: public class DTaskFactory implements Even ...

  4. 重读《深入理解Java虚拟机》三、Java虚拟机执行的数据入口（类文件结构）

    1.Java如何实现平台无关系 Java要实现平台无关系就需要在Java代码和本地机器之间引入一个中间层,实现Java代码和本地机器的解耦,而这个中间层就是字节码.字节码独立于本地机器,以实现代码的可 ...

  5. AMI：加密的机器映像。卷

    (一)定义:镜像AMI (Amazon Machine Image,机器映像)是一个可以将操作系统.用户的应用程序.配置等一起打包的加密机器映像.用于启用实例的预配置服务器模板.每个 AMI 由一个操 ...

  6. python的队列和栈

    (一)队列和栈的区别 1.队列: 队列是一种特殊的线性表.其两头都有限制,插入只能在表的一端进行(只进不出),而删除只能在表的另一端进行(只出不进),允许删除的一端称为队尾(rear),允许插入的一端 ...

  7. linux网络设置和虚拟机克隆转移之后网卡找不到

    linux网络设置和虚拟机克隆转移之后Error:No suitable device found:no device found for connection 'System eth0'问题解决   ...

  8. Postman教程

    1.Postman的介绍 Postman是一款功能强大的用于发送 HTTP 请求的 Chrome插件 .做web页面开发和测试的人员应该都知道!其主要特点:创建 + 测试:创建和发送任何的HTTP请求 ...

  9. 003-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-分布式服务框架的选择

    3.1.淘宝平台“服务化”历程 大约2007年,淘宝500人团队,维护一个war包,200多个功能模块. 1)项目团队协同成本高,业务响应越来越慢 2)应用复杂度超出人的认知负载. 3)错误难于隔离[ ...

  10. 开发uniapp必备

    开发工具http://quickapp.dcloud.io/ 开发手册 http://uniapp.dcloud.io/api/README(2018-7-27 发布) 调试环境http://ask. ...