<!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. JAR，WAR，EAR区别

    JAR WAR EAR 英文 Java Archive file Web Archive file Enterprise Archive file 包含内容 class.properties文件,是文 ...

  2. Oracle常见的异常处理

    总结了在操作数据库的时候常常遇见的Oracle异常以及处理方法. 代码 提示 备注 一般处理方法 ORA-01861 文字与格式字符串不匹配- ORA-00904 invalid column nam ...

  3. 【转】排名前十位的Linux发行版介绍

    Linux Distributions众多,据说有350个之多.distrowatch.com网站评出了排名前十位的Linux发行版.它们是:1.Ubuntu,当前最新版本是10.10:2.Fedor ...

  4. HDUOJ----数塔

    数塔 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submission ...

  5. PC上的番茄工作法软件 Pomodairo 1.9 详细攻略

    http://www.zhantuo.com/archives/673155 番茄钟软件 Pomodairo 1.9: 我觉得这款软件特别好,完全符合番茄工作法的要求. 你可以通过add new 来增 ...

  6. HawkHost老鹰主机更换主域名方法

    http://www.yd631.com/change-hawkhost-primary-domain/圣诞节优惠期间,很多童鞋们购买了老鹰主机,可能由于大家初次使用海外主机或者是CP面板的空间.购买 ...

  7. PMP备考经验分享

    大学毕业到现在工作已经5年了,在最初的3年里一直从事软件开发的工作,但是在后面的工作时间里,接触到了项目管理,不仅 需要自己能做,而且要带领团队做,管控项目了.当时部门里的技术经理学习过PMP,并参加 ...

  8. OAF_OAF控件系列2 - LOV的实现（案例）

    2014-06-02 Created By BaoXinjian

  9. Android 添加源码到eclipse 以及相关设置

    作者:舍得333 主页:http://blog.sina.com.cn/u/1509658847版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出版.作者信息和本声明,否则将追究法律 ...

  10. DB2中三个有关锁变量DB2_EVALUNCOMMITTED，DB2_SKIPDELETED和DB2_SKIPINSERTED的使用

    本文主要解释下DB2中三个有关锁变量DB2_EVALUNCOMMITTED,DB2_SKIPDELETED和DB2_SKIPINSERTED的使用 实验环境: DB2 v9.7.0.6 AIX 6.1 ...