zoukankan      html  css  js  c++  java
  • JavaScript class的操作

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .d1{
                     100px;
                    height: 100px;
                    background-color: red;
                }
                .d2{
                    height: 200px;
                    background-color: green;
                }
            </style>
        </head>
        <body>
            <button id="btn">操作#d01</button>
            <br /><br />
            <div id="box" class="d1 d2">
            </div>
        </body>
        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");
            /*
             * 通过class属性来间接的修改样式
             * 这样我们只需要修改一次,提升性能,
             */
            btn.onclick=function(){
    //            box.className="d2";
    //            box.className+=" d2";//在d1上增加d2样式,注意d2前面有空格
                
                //addClass(box,"d2");
                
                //removeClass(box,"d2");
                
                toggleClass(box,"d2");
                
                
            }
            
            
            /*定一个函数来用来想一个元素中动态添加指定的class属性值
             * -参数:
             *         obj 目标元素
             *         cn 要添加的class值
             */
            function addClass(obj,cn){
                //判断,防止cn有了还执行函数多次添加
                if(!hasClass(obj,cn)){
                    obj.className += " "+cn;
                }
                
            }
            /*判断一个元素中是否含有指定的class属性值
             * 如果有,返回true
             */
            function hasClass(obj,cn){
                //判断obj中有没有cn class,正则表达式
                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," ");
            }
            /*切换一个class
             * 如果元素中有该class,则删除;没有,则添加
             */
            function toggleClass(obj,cn){
                if(hasClass(obj,cn)){
                    removeClass(obj,cn);
                }else{
                    addClass(obj,cn);
                }
            }
        </script>
    </html>
  • 相关阅读:
    springboot文件上传: 单个文件上传 和 多个文件上传
    Eclipse:很不错的插件-devStyle,将你的eclipse变成idea风格
    springboot项目搭建:结构和入门程序
    POJ 3169 Layout 差分约束系统
    POJ 3723 Conscription 最小生成树
    POJ 3255 Roadblocks 次短路
    UVA 11367 Full Tank? 最短路
    UVA 10269 Adventure of Super Mario 最短路
    UVA 10603 Fill 最短路
    POJ 2431 Expedition 优先队列
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11320734.html
Copyright © 2011-2022 走看看