模擬一個本身的jquery（四）操做樣式

時間 2019-12-08

原文原文鏈接

操做樣式相關方法

js操做樣式最簡單的就是獲取元素的style屬性以及修改style屬性，設置樣式能夠設置style的值，可是獲取樣式使用style每每不能獲得想要的值，由於style只能獲取到直接設置在元素style上面的樣式，而咱們樣式每每是在單獨的css文件裏面，因此獲取樣式不能使用style。javascript

那麼怎麼獲取正確的元素樣式呢，咱們能夠經過document.defaultView.getComputedStyle（w3c）或者元素的currentStyle屬性（ie）來獲取瀏覽器計算後的正確樣式。css

如：html

function getStyle(el,name){
        var value=el.style[name];
        if(!value){
            //w3c
            if(document.defaultView&&document.defaultView.getComputedStyle){
                var css=document.defaultView.getComputedStyle(el,null);
                value=css?css.getPropertyValue(name):null;
            }
            //ie
            else if(el.currentStyle){
                value=el.currentStyle[name];
            }
        }
        return value=='auto'?'':value;
    }

其實改變樣式每每用的更多的是操做類，經過類來指定樣式，這樣便於維護，也符合表現(css)與行爲(js)相分離的編程思想。java

css.js暫時模擬了jquery的css方法以及 addClass、removeClass、hasClass、以及toggle方法。還把一開始的hide與show方法移到了css.js裏面由於這2個方法也是操做的樣式。jquery

css.js編程

    /*!Css 樣式修改
     *
     *Date   2014-4-13
     *author meng
    */
(function(_window){
    //定義css方法 根據參數類型與個數實現不一樣功能
    //css(name)，則返回樣式名爲name的樣式值
    //css(name,val)，設置樣式名name的樣式值爲value
    //css(name,fun),設置樣式名爲name的樣式值爲fun函數的返回值
    //css({property:value, property:value, ...}),把「名/值對」設置爲樣式屬性
    _window.MQuery.fn.css=function(cssarg){
        if(this.elements.length<=0) return;
        var length=arguments.length,
        //參數1 要麼爲設置樣式的名稱 要麼是一個參數名稱與參數值的鍵值對 
        arg1=arguments[0],
        //參數2 要麼是設置的值 要麼是一個函數
        arg2=arguments[1];

        if(length==0||!arg1)
            throw new Error("css 方法參數不能爲空")
        //1個參數
        if(length==1){
            //css("name") 
            if(typeof(arg1)=="string"){
                return getStyle(this.elements[0],arg1);
            }
            //css({property:value, property:value, ...})
            else if(typeof(arg1)=="object"){
                for(v in arg1){
                    this.each(function(x){
                        setStyle(x,v,arg1[v]);
                    });
                }
            }
        }
        else if(length==2){
            var val='';
            //css("name","val")
            if(typeof(arg1)=="string"&&typeof(arg2)=="string"){
                val=arg2;
            }
            //css("name",fun)
            else if(typeof(arg1)=='string'&&typeof(arg2)=='function'){
                val=arg2();
            }
            this.each(function(x){
                setStyle(x,arg1,val);
            });
            return this;
        }
    }

    //如下定義了 addClass,removeClass,hasClass,toggle 若是有classlist屬性則直接使用classlist 不然本身實現
    _window.MQuery.fn.addClass=function(className){
        this.each(function(x){
            if(x.classList){
                x.classList.add(className);
            }
            else{
                if(!hasClassName(x,className)){
                    addClassName(x,className);    
                }
            }
        })
    }

    _window.MQuery.fn.removeClass=function(className){
        this.each(function(x){
            if(x.classList){
                x.classList.remove(className);
            }
            else{
                if(hasClassName(x,className)){
                    removeClassName(x,className);
                }
            }
        })
    }

    _window.MQuery.fn.hasClass=function(className){
        if(this.length==0){return;}
        var el=this.elements[0];
        if(el.classList){
            return el.classList.contains(className);
        }
        else{
            return hasClassName(el,className);
        }
    }
    //若是存在className則移除className,不然增長className
    _window.MQuery.fn.toggle=function(className){
        this.each(function(x){
            if(x.classList){
                x.classList.toggle(className);
            }
            else{
                if(hasClassName(x,className)){
                    removeClassName(x,className);
                }
                else{
                    addClassName(x,className)
                }
            }
        })
    }

    //define hide
    MQuery.fn.hide=function(){
        this.each(function(e){
            e.style.display='none';
        });
    }
    //define show
    MQuery.fn.show=function(){
        this.each(function(e){
            e.style.display='';
        });
    }
    //如下爲私有方法
    //移除類
    function removeClassName(el,className){
        var classNameArry=el.className.split(' ');
        for(var i=0;i<classNameArry.length;i++){
            if(classNameArry[i]==className){
                classNameArry.splice(i,1);
            }
        }
        el.className=classNameArry.join(' ');
    }
    //判斷是否已存在類
    function hasClassName(el,className){
        var classNames=el.className.split(' ');
        for(var i=0;i<classNames.length;i++){
            if(classNames[i]==className){
                return true;
            }
        }
        return false;
    }
    //增長類
    function addClassName(el,className){
        el.className+=(' '+className);
    }
    //獲取一個元素的最終樣式
    function getStyle(el,name){
        var value=el.style[name];
        if(!value){
            //w3c
            if(document.defaultView&&document.defaultView.getComputedStyle){
                var css=document.defaultView.getComputedStyle(el,null);
                value=css?css.getPropertyValue(name):null;
            }
            //ie
            else if(el.currentStyle){
                value=el.currentStyle[name];
            }
        }
        return value=='auto'?'':value;
    }
    //設置元素的樣式
    function setStyle(el,name,val){
        el.style[name]=val;
    }
})(window)

html瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <title>mquery</title>
        <style>
            body .p{
                width: 150px;
                height: 50px;
                margin-bottom: 20px;
                padding: 20px;
            }
            .borderred{
                border:1px solid red;
            }
            .padding{
                padding: 20px;
            }
        </style>
        <script type="text/javascript" src="../core/sizzle.js"></script>
        <script type="text/javascript" src="../core/mquery.js"></script>
        <script type="text/javascript" src="../core/css.js"></script>
    </head>
    <body>
        <p class="p">ppppp1</p>
        <p class="p">ppppp2</p>
        <script type="text/javascript">
            var p = $("p");
            p.css("width",'300px').css({"height":'300px',"color":'red'});
            p.css("background-color",function(){return "black"});
            p.css("background-color","#fff");
            console.log('hasborderred:'+p.hasClass("borderred"));
            p.addClass("borderred");
            console.log('hasborderred:'+p.hasClass("borderred"));
            p.removeClass("borderred");
            console.log('hasborderred:'+p.hasClass("borderred"));
            p.toggle("padding");
            console.log('haspadding:'+p.hasClass("padding"));
            p.toggle("padding");
            console.log('haspadding:'+p.hasClass("padding"));
        </script>
    </body>
</html>