<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
        <div id = "test" style = "width:250px;height:100px;">  
            sssssssssssss  
        </div>  
        <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
    </body>
</html>
    <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>

原声js实现addClass removeClass toggleClass效果的更多相关文章

  1. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

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

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

  3. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. HDU 3316 My Brute（二维费用流）经典

    My Brute Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  2. KnockoutJS + My97DatePicker

    如何将Knockoutjs和其他脚本库结合使用?这里给出一个Knockoutjs与my97datepicker配合使用的例子,例子中使用了ko的自定义绑定功能: ko.bindingHandlers. ...

  3. MyEclipse下的Debug调试技巧汇总

    首先以debug模式启动tomcat,并文件中设断点,然后运行,当程序走到断点处就会转到debug视图下 [1]快捷键(F8)直接执行程序. [2]快捷键(F5)单步执行程序,遇到方法时进入. [3] ...

  4. Golang配置文件解析-oozgconf

    代码地址如下:http://www.demodashi.com/demo/14411.html 简介 oozgconf基于Golang开发,用于项目中配置文件的读取以及加载,是一个轻量级的配置文件工具 ...

  5. SpringBoot之自定义验证码

    代码地址如下:http://www.demodashi.com/demo/14280.html 项目介绍 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控 ...

  6. 【laravel5.4】git上clone项目到本地，配置和运行 项目报错：../vendor/aotuload.php不存在

    1.一般我们直接使用git clone 将git的项目克隆下来,在本地git库和云上git库建立关联关系 2.vendor[扩展]文件夹是不会上传的,那么下载下来直接运行项目,会报错: D:phpSt ...

  7. kubernetes中使用NFS创建pv_pvc

    Persistent Volume(持久化卷)简称PV, 是一个K8S资源对象,我们可以单独创建一个PV, 它不和Pod直接发生关系, 而是通过 Persistent Volume Claim, 简称 ...

  8. jquery json ajax三级联动

    province_city_area.jsp <%@ page language="java" pageEncoding="UTF-8"%> < ...

  9. iOS获取手机型号，Swift获取手机型号（类似iphone 7这种，检测机型具体型号）

    获取手机设备信息,如name.model.version等, 但如果想获取具体的手机型号,如iphone5.5s这种,就需要如下这种(含Swift和OC两种写法) Swift建议添加到extensio ...

  10. POJ 3691 DNA Sequence （AC自动机 + 矩阵 有bug，待修改）

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9889   Accepted: 3712 Desc ...