zoukankan html css js c++ java

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

查看全文

相关阅读:
Node.js中exports与module.exports的区别
 Node js : Best way to define entity class
使用 mongodb 的 Docker Image 快速上手系列 lab
CreateFont函数为什么改变不了字体？该怎么解决
 docker service ps打印出来的错误信息被截断了怎么办？
Docker for windows可用性检查
 Express application generator的使用
 Docker：如何将node.js的项目部署到docker的swarm上面去
 Docker worker nodes shown as “Down” after re-start
Docker创建虚机和swarm

原文地址：https://www.cnblogs.com/cisum/p/7987212.html