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. linux查内存操作：cat /proc/meminfo

    https://www.cnblogs.com/zhuiluoyu/p/6154898.html cat /proc/meminfo

  2. 2018/04/25 基于 编译安装的 PHP7 安装 swoole 扩展

    在上一篇文章我们知道了如何去编译安装一个自己需要的 PHP 版本. 2018/04/25 PHP7的编译安装 这里还没有完,我们还需要安装我们的扩展,才算完成今天的任务. -- 下载扩展 还是官网下载 ...

  3. pacakge-info.java

    翻看以前的笔记,看到一个特殊的java文件:pacakge-info.java,虽然有记录,但是不全,就尝试着追踪一下该问题, 分享一下流水账式的结果. 首先,它不能随便被创建.在Eclipse中, ...

  4. eslint 代码检测工具

    jshint 检测工具不够灵活下,道格拉斯(何许人也?json创造者,javascript重要任务,犀牛那本书就是他写的). 文档地址: 中文地址 English 安装 利用npm全局安装eslint ...

  5. [MySQL优化2]不用SELECT * FROM table;

    假设有一张employees表,它有8列:员工人数,姓氏,名字,分机,电子邮件,办公室代码,报告,职位等.如果要仅查看员工的名字,姓氏和职位,请使用以下查询:SELECT lastname, firs ...

  6. android下的样式

    android中控件,假如我们把样式都写死在控件的配置文件上的话.一旦改动可谓牵一发而动千军.那么我们能够把样式写在style.xml文件里.然后引用,在API14以上版本号. 该文件位于values ...

  7. unix下命令窗分屏工具

    运行 sudo apt-get install terminator 效果 新建分屏窗口:右键鼠标选择

  8. hadoop搭建伪分布式集群（centos7+hadoop-3.1.0/2.7.7）

    目录: Hadoop三种安装模式 搭建伪分布式集群准备条件 第一部分 安装前部署 1.查看虚拟机版本2.查看IP地址3.修改主机名为hadoop4.修改 /etc/hosts5.关闭防火墙6.关闭SE ...

  9. python中的0,None,False,空容器

    在Python中,None.空列表[].空字典{}.空元组().0等一系列代表空和无的对象会被转换成False.除此之外的其它对象都会被转化成True. 1.0等于False,这点要注意. 2.空的l ...

  10. Devops路线

    自动化运维工具 Docker学习 .