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. [development][C] 条件变量(condition variables)的应用场景是什么

    产生这个问题的起因是这样的: ‎[:] ‎<‎tong‎>‎ lilydjwg: 主线程要启动N个子线程, 一个局部变量作为把同样的参数传入每一个子线程. 子线程在开始的十行会处理完参数. ...

  2. kubernetes的应用数据持久化

    1.无状态应用与有状态应用 应用的有状态和无状态是根据应用是否有持久化保存数据的需求而言的,即持久化保存数据的应用为有状态的应用,反之则为无状态的应用.常见的系统往往是有状态的应用,比如对于微博和微信 ...

  3. Orchard Core 中数据库使用postgresql-10

    在配置好Startup.cs后,运行程序: 首先需要设置一些基本信息.这里我试着配置如下,数据库使用postgresql,连接字符串像这样: Host=192.168.0.111;UserName=u ...

  4. fiddler 实现代理的操作

  5. Could not autowire. No beans of 'TbItemMapper' type found. less... (Ctrl+F1) Checks autowiring prob

    Intellij Idea开发工具在@Autowired或者@Resource注入XxxMapper接口时报如下错误: Could not autowire. No beans of 'TbItemM ...

  6. Docker 镜像（五）

    我们都知道,操作系统分为内核和用户空间.对于 Linux 而言,内核启动后,会挂载 root 文件系统为其提供用户空间支持.而 Docker 镜像(Image),就相当于是一个 root 文件系统.比 ...

  7. 关于ARMv8另外几个问题

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/qianlong4526888/article/details/27510675 问题1:支持ARMv ...

  8. 火币网API文档——Websocket 请求与订阅示例

    1. 访问地址 Pro 站行情请求地址为:wss://api.huobipro.com/ws HADAX 站行情请求地址为:wss://api.hadax.com/ws 2. 数据压缩 WebSock ...

  9. 2 jmeter常用功能介绍-测试计划、线程组

    1.测试计划测试用来描述一个性能测试,所有内容都是基于这个测试计划的. (1)User Defined Variables:设置用户全局变量.一般添加一些系统常用的配置.如果测试过程中想切换环境,切换 ...

  10. javascript篇-知道value值，返回对象中的key值

    前提是,value值是唯一的,业务中有这样一个需求,代码如下: