machinecat520
/
zj-Exercise


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .b2 {

            height: 200px;
            background-color: yellow;
        }
    </Style>
    <script>
        window.onload = function () {
            //获取box
            var box = document.getElementById('box');
            //获取btn01
            var btn01 = document.getElementById('btn01');
            //为btn01绑定单击响应函数
            btn01.onclick = function () {
                //修改box的样式
                /**
                 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染
                 *  一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个
                 *  样式时，也不太方便
                 * */
                // box.style.width = '200px';
                // box.style.height = '200px';
                // box.style.backgroundColor = 'yellow';
                /**
                 * 我们希望一行代码，可以同时修改多个样式
                */

                //修改box的class属性
                /**
                 * 我们可以通过修改元素的class属性来间接的修改样式
                 *  这样一来，我们只需要修改一次，就可以同时修改多个样式，
                 *  此时浏览器只需要重新渲染页面一次，性能比较好，
                 *  并且这种方式可以使表现和行为进一步的分离
                */
                // box.className = 'b2';
                // box.className += ' b2';//注意b2前需要加一个空格
                // addClass(box, 'b2');
                // alert(hasClass(box,'b2'));
                // removeClass(box,'b2');
                toggleClass(box,'b2');
            };
        };

        //定义一个函数，用来向一个元素中添加指定的class属性值
        /**
         * 参数：
         *  obj：要添加class属性的元素
         *  cn：要添加的class值
        */
        function addClass(obj, cn) {
            //检查obj中是否含有cn
            if(!hasClass(obj,cn)){
                obj.className += ' ' + cn;
            }
            // obj.className += ' ' + cn;//单引号内是一个空格，必须要输入，否则会报错
        };

        /**
         * 判断一个元素中是否含有指定的class值
         *  如果有该class，则返回true，没有则返回false
         * 
        */
        function hasClass(obj, cn) {
            //判断obj中有没有cn class
            // return obj.className == cn;
            //创建一个正则表达式
            // var reg = /\bb2\b/;//这种方式把数据写死了
            // return reg.test(obj.className);

            var reg = RegExp('\\b'+cn+'\\b');
            // alert(reg);
            return reg.test(obj.className);
        };

        /**
         * 删除一个元素中的指定的class属性
        */
        function removeClass(obj,cn){
            //创建一个正则表达式
            var reg = RegExp('\\b'+cn+'\\b');
            //删除class
            obj.className = obj.className.replace(reg,'');
        };

        /**
         * toggleClass可以用来切换一个类
         *  如果元素中具有该类，则删除
         *  如果元素中没有该类，则添加
        */
        function toggleClass(obj,cn){
            //判断obj中是否含有cn
            if(hasClass(obj,cn)){
                //有，删除
                removeClass(obj,cn);
            }else{
                //没有，则添加
                addClass(obj,cn);
            }
        };

    </script>
</head>

<body>
    <button id="btn01">点击按钮以后修改box样式</button>
    <br /><br />
    <div id="box" class="b1"></div>
</body>

</html>