<!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. /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory 错误：

    在安装tomcat时报了错: /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory 本机环境: [root@AY1405 ...

  2. JS获取浏览器高宽度,屏幕分辨率和一些定位空隙等

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  3. Redis学习（1）--环境配置，安装JDK，MySQL，tomcat

    Linux上安装jdk,mysql,tomcat安装 rpm命令: 相当于Windows的安装/卸载程序.可以进行程序的安装,更新,卸载,查看. 本地程序安装:rpm -ivh 程序名 本地程序查看: ...

  4. OpenWrt中对USB文件系统的操作, 以及读写性能测试

    参考 http://h-wrt.com/en/doc/flash 1. 查看usb存储在启动日志中的信息 # dmesg [ 5.720000] usbcore: registered new int ...

  5. html5中的FileReader对象

    表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...

  6. log4j的NDC/MDC区别与应用

    MDC与NDC除了存储方式(MDC采用MapNDC采用堆栈结构)有区别,其他都一样的 关键点 A -//引入log4j MDC类org.apache.log4j.MDC -//设置值 -MDC.put ...

  7. linux服务器的Gzip文件压缩方法[转]

    一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...

  8. WEB网络问题的排查【转】

    Browser/Server结构主要是利用了不断成熟的Web浏览器技术:结合浏览器的多种脚本语言和ActiveX技术,用通用浏览器实现原来需要复杂专用软件才能实现的强大功能,同时节约了开发成本.B/S ...

  9. Android仿联系人列表分组悬浮列表实现，自己定义PinnedHeaderListView实现

    效果 (关于gif怎么生成的.我先录手机的屏幕得到mp4文件.然后用这个网址:https://cloudconvert.com/mp4-to-gif 进行的mp4转换gif,使用的时候须要又一次选择g ...

  10. 分享Memcached shell启动停止脚本

    注意:要使用这个shell,必须先成功建立memcache环境 1>建立memcached文件和权限 [root@luozhonghua ~]# touch /etc/init.d/memcac ...