2017-12-20 JS 盒子模型

1.client.

clientWidth/clientHeight:width/height+左右/上下padding
clientLeft/clientTop:左/上邊框寬度

2.scroll:主要看溢出沒有.能夠作出水平滾動的模型,

scrollWidth:若是內容沒有溢出,跟clientWidth同樣的,若是內容有溢出表示真實內容的寬+左padding
scrollHeight:若是內容沒有溢出,跟clientHeight同樣的,若是內容有溢出表示真實內容的高+上padding
scrollLeft:橫向滾動的距離
scrollTop:滾動條滾上去的距離

3.offset

offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下border
offsetLeft/offsetTop:距離父級參照物的左/上偏移量
offsetParent:父級參照物

注意::13個屬性中,只有scrollTop與scrollLeft能夠獲取和設置,其餘能夠獲取,不能夠設置.

getComputedStyle(box)//能夠獲取styley內的box的樣式,而不須要寫在行內

2.1擴展:水平滾動代碼

var container=document.getElementsByClassName("container")[0];
var boxBegin=document.getElementsByClassName("box-begin")[0];
//獲取一個盒子的寬
var boxW=boxBegin.offsetWidth;
//注意:container有滾動條全部操做的是container的scrollLeft
function fn() {
    //container.scrollLeft一旦大於等於boxW的時候,從0開始,其餘狀況正常增長便可
    this.scrollLeft>=boxW?this.scrollLeft=0:this.scrollLeft++;
}
//設置一個定時器讓container的scrollLeft不斷增長
var timer=window.setInterval(function () {
    fn.call(container)
},20);
//給 container綁定鼠標滑過事件,鼠標放上中止定時器
container.onmouseover=function () {
    window.clearInterval(timer);
};
//鼠標移開 container,定時器繼續
container.onmouseout=function () {
    //this container
    timer=window.setInterval(()=>{fn.call(this)},20);
}

擴展:回到頂部模型和獲取offset的模型能夠封裝成兩個函數放在一個js中,html中引用

let $=(function () {
    function win(attr,value) {
        if(arguments.length==1){
            return document.documentElement[attr]||document.body[attr];
        }else if(arguments.length==2) {
            document.documentElement[attr]=value;
            document.body[attr]=value;
        }
    }
    function offset(curEle) {
        var L=curEle.offsetLeft;
        var T=curEle.offsetTop;
        var P=curEle.offsetParent;
        while (P){
            if(!/MSIE 8/.test(window.navigator.userAgent)){
                L+=P.clientLeft;
                T+=P.clientTop;
            }
            L+=P.offsetLeft;
            T+=P.offsetTop;
            P=P.offsetParent;
        }
    }
    return{
        win:win,
        offset:offset
    }
})();

該方法用在回到頂部的案例中

//需求:當網頁滾上去的距離超過一屏了此時顯示upvar body=document.body;var up=document.getElementById("up");//獲取一屏的高var H=$.win("clientHeight");var timer=null;body.onscroll=function () {    //判斷滾上去的距離是否大於等於H,一旦大於等於H,此時讓up顯示    if($.win("scrollTop")>=H){        up.style.display="block";    }else {        up.style.display="none";    }};//給up綁定點擊事件,讓 scrollTop值不斷減少到0,設置定時器讓其減少,當scrollTop值小於等於0時候清除定時器up.onclick=function () {    timer=setInterval(function () {        //先獲取scrollTop值        var t=$.win("scrollTop");        //將這個值減少再賦值給scrollTop        $.win("scrollTop",t-=100);        //判斷臨界值        if(t<=0){            clearInterval(timer)        }    },10)}