<!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. sp_trace_setfilter sqlserver筛选跟踪或跟踪过滤

    sp_trace_setfilter sp_trace_setfilter [ @traceid = ] trace_id , [ @columnid = ] column_id , [ @logic ...

  2. Java中网络相关API的应用——InetAddress&URL

    一.InetAddress类 标识网络上的硬件资源 package com.homework; import java.net.InetAddress; import java.net.Unknown ...

  3. 让 linux centos 文件夹地址栏 位置栏显示出来的方法

    今天又拿起心爱的 linux ,发现多日不用又忘记了不少知识了    , 发现忘记的速度真是惊人的! 设置方法: 编辑-> 首选项-> 勾选 总是在浏览器窗口中打开,  如图:

  4. 设置sqlplus访问远程oracle数据库的最快方法

    设置sqlplus访问远程oracle数据库的最快方法 时间:2010-01-21 10:57来源: 作者: 点击: 2次 设置sqlplus访问远程oracle数据库的最快方法,如果要连接远程数据库 ...

  5. Swift代理造成内存泄漏的解决办法

    在swift中,使用代理 ,可能很多人会这样实现: .首先定义一份协议. protocol ToolProrocol{ //代理方法 func didRecieveResults(result:Int ...

  6. leetcode693:Binary Number with Alternating Bits

    判断一个数字的二进制形式是不是01交替的. 如5=101,返回True 如7=111,返回False 这道题可以用位运算来实现.看到01交替,就想到移位运算.如果n是01交替的,移位之后进行异或,则得 ...

  7. SecureCRT 详细使用教程和技巧

    SecureCRT 常用技巧 0.在secureCRT里切换不同的窗口:ctrl+tab.    复制:[ctrl] + [shift] + c    粘贴:[ctrl] + [shift] + v  ...

  8. vs开发 winform 设置winform 获取管理员权限启动

    因为需要设置为开机项 没有管理员权限对注册表访问失败 C# 以管理员身份运行WinForm程序 转载https://www.bbsmax.com/A/obzbkKrQJE/ 鱼洛 2016-07-29 ...

  9. [Android实例] 拖动滑块进行图片拼合验证方式的实现

    该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...

  10. shell学习四十八天----文件校验和匹配

    文件校验和匹配 要是你怀疑可能有非常多文件具有同样的内文,而是用cmp或diff进行比較全部横队的比較,导致所花费的时间会随着文件数目增长成次方的增长. 这是能够使用file checksum(文件校 ...