实现toggleClass功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 <title>Document</title>
 9 <style>
10 div.testClass {
11 background-color: gray;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <div id="test" style="250px;height:100px;">
18 sssssssssssss
19 </div>
20 <input type="button" value="toggleClassTest" onclick="toggleClassTest();" />
21 </body>
22 
23 
24 <script type="text/javascript">
25 function hasClass(obj, cls) {
26 return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
27 }
28 
29 function addClass(obj, cls) {
30 if (!this.hasClass(obj, cls)) obj.className += " " + cls;
31 }
32 
33 function removeClass(obj, cls) {
34 if (hasClass(obj, cls)) {
35 var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
36 obj.className = obj.className.replace(reg, ' ');
37 }
38 }
39 
40 function toggleClass(obj, cls) {
41 if (hasClass(obj, cls)) {
42 removeClass(obj, cls);
43 } else {
44 addClass(obj, cls);
45 }
46 }
47 
48 function toggleClassTest() {
49 var obj = document.getElementById('test');
50 toggleClass(obj, "testClass");
51 }
52 </script>
53 
54 </html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div.testClass {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="test" style="250px;height:100px;">
        sssssssssssss
    </div>
    <input type="button" value="toggleClassTest" onclick="toggleClassTest();" />
</body>


<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>

</html>

相关阅读:
Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
 document.readyState和document.DOMContentLoaded判断DOM的加载完成
 CSS实现进度条
 H5案例分享：移动端滑屏 touch事件
 Passive Event Listeners——让页面滑动更加流畅的新特性
 禁止蒙层底部页面跟随滚动
 跨域Ajax请求时是否带Cookie的设置
 HTML5 元素拖动
 浅谈程序员的英语学习
 (转载)史上最详细的docker学习手册
原文地址：https://www.cnblogs.com/cisum/p/7987212.html