美文网首页
类的操作

类的操作

作者: 虎三呀 | 来源:发表于2018-02-08 14:37 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .b1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            .b2{
                height: 300px;
                background-color: yellow;
            }
            
        </style>
        
        <script type="text/javascript">
            
            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";
                    //addClass(box,"b2");
                    
                    //alert(hasClass(box,"hello"));
                    
                    //removeClass(box,"b2");
                    
                    toggleClass(box,"b2");
                };
                
            };
            
            //定义一个函数,用来向一个元素中添加指定的class属性值
            /*
             * 参数:
             *  obj 要添加class属性的元素
             *  cn 要添加的class值
             *  
             */
            function addClass(obj , cn){
                
                //检查obj中是否含有cn
                if(!hasClass(obj , cn)){
                    obj.className += " "+cn;
                }
                
            }
            
            /*
             * 判断一个元素中是否含有指定的class属性值
             *  如果有该class,则返回true,没有则返回false
             *  
             */
            function hasClass(obj , cn){
                
                //判断obj中有没有cn class
                //创建一个正则表达式
                //var reg = /\bb2\b/;
                var reg = new RegExp("\\b"+cn+"\\b");
                
                return reg.test(obj.className);
                
            }
            
            /*
             * 删除一个元素中的指定的class属性
             */
            function removeClass(obj , cn){
                //创建一个正则表达式
                var reg = new 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 b2"></div>
    </body>
</html>

相关文章

网友评论

      本文标题:类的操作

      本文链接:https://www.haomeiwen.com/subject/fojttftx.html