<!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. ViewPager切换动画效果改动

    比方我们点击向右button,希望左边的view移动过来,有个平移效果,可是用系统默认的ViewPager切换的时候,会一闪而过. 这是为什么呢? 由于viewpager外面事实上有个scrollvi ...

  2. Android进程注入

    全部代码在这里下载:http://download.csdn.net/detail/a345017062/8133239 里面有两个exe.inj是一个C层进程注入的样例.inj_dalvik是我写的 ...

  3. repr

    >>> import datetime >>> today=datetime.datetime.now() >>> today datetime. ...

  4. &和&&的一点区别

    &两边的语句都会执行,&&有可能只执行左边的语句. &做位运算与的时候可以更高效的判断一个数字是不是奇数. 1&1 = 1 0&1 = 0 所以和1与结 ...

  5. mysql 设置密码

    法一: 格式:mysqladmin -u用户名 -p旧密码 password 新密码 方法二:1.用root 进入mysql后mysql>set password =password('你的密码 ...

  6. GridView显示数据鼠标悬停变色

    一. 首先在前台GridView中加上onrowdatabound="GridView1_RowDataBound": <asp:GridView ID="Grid ...

  7. Nginx中的安全配置

    1.测试环境 操作系统:CentOS6.5 Web服务器:Nginx1.4.6 Php版本:Php5.4.26 2.Nginx介绍 1.nginx本身不能处理PHP,它只是个web服务器,当接收到请求 ...

  8. 使用Visual Studio code

    快捷键 ctrl+b 打开或关闭侧边栏 ctrl+\ 打开多个editor ctrl+e 快速的通过名字打开一个文件 右键选择 Reveal in Explorer 打开文件夹 ctrl+tab 快速 ...

  9. 4.Java基础：Java对象的内存管理机制

    1.使用new创建对象,在堆内存分配对象空间.初始化: 2.在方法栈中定义局部变量,吃用对堆内存中对象的引用: 3.方法执行完返回,栈内存自动释放,局部变量销毁: 4.如果堆内存中对象没有变量引用它, ...

  10. 转python+selenium 使用switch_to_alert 出现的怪异常

    如果switch_to_alert不工作,最重要的问题就是,有1个以上的浏览器开启,导致alert抓取不到.并且在使用switch_to_alert的时候时间会比较长一些,需要等待一会儿才能完成acc ...