javascript基礎(chǔ)總結(jié)（三）——盒子模型

RayKr 發(fā)布于2019-08-20 16:06 / 485人閱讀

摘要：中的盒子模型通過(guò)中提供一系列的方法和屬性獲取頁(yè)面中元素的樣式信息值系列內(nèi)容的寬高是給元素定義的這兩個(gè)樣式。

1、js中的盒子模型

通過(guò)js中提供一系列的方法和屬性獲取頁(yè)面中元素的樣式信息值；

2、client系列

內(nèi)容的寬高：是給元素定義的width/height這兩個(gè)樣式。如果沒(méi)有設(shè)置height值，容器的高度會(huì)根據(jù)里面內(nèi)容自己適應(yīng)，這樣獲取的值就是真實(shí)的內(nèi)容的高；如果設(shè)置固定的高度，不管內(nèi)容是多少，內(nèi)容的高度指的都是設(shè)定的這個(gè)值；
真實(shí)內(nèi)容的寬高：如果設(shè)置的height是200px，如果內(nèi)容有溢出，那么真實(shí)內(nèi)容的高度是把溢出內(nèi)容的高度也要加起來(lái)；

clientHeight || clientWidth
//內(nèi)容的寬度/高度+左右/上下填充(padding)

clientLeft || clientTop
//左邊框/上邊框的高度

3、offset系列

offsetHeight || offsetWidth
//clientHeight/clientWidth + 左右/上下邊框（和內(nèi)容是否溢出沒(méi)有關(guān)系）

offsetParent
//當(dāng)前元素的父級(jí)參照物

offsetLeft || offsetTop 
//當(dāng)前元素的外邊框距離父級(jí)參照物的內(nèi)邊框的偏移量

計(jì)算元素距離body的上部和左部的距離

function offset(el) {
    var oLeft   = el.offsetLeft,
        oTop    = el.offsetTop,
        oParent = el.offsetParent;
    while(oParent) {
        //ie8下不計(jì)算邊框
        if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
            oLeft += oParent.clientLeft;
            oTop  += oParent.clientTop;
        }
        oLeft += oParent.offsetLeft;
        oTop  += oParent.offsetTop;
        oParent = oParent.offsetParent;
    }
    return {"left": oLeft,"top": oTop} 
}
offset(box2);//{left: 239, top: 218}

注：在標(biāo)準(zhǔn)的IE8瀏覽器中，我們使用offsetLeft/offsetTop其實(shí)是把父級(jí)參照物的邊框已經(jīng)算在內(nèi)，在IE8瀏覽器下就不需要多帶帶加邊框了；

4、scroll系列

scrollHeight || scrollWidth
//真實(shí)內(nèi)容的高度/寬度（包含溢出）+ 左填充/上填充
//注:獲取到的結(jié)果都是約等于的值，因?yàn)橥粋€(gè)瀏覽器是否設(shè)置overflow=hidden對(duì)于最終的結(jié)果是有影響的；在不同的瀏覽器中我們獲取的結(jié)果也是不同的。

scrollTop || scrollLeft 
//滾動(dòng)條卷去的高度

5、操作瀏覽器本身盒子模型信息

clientWidth/clientHeight是當(dāng)前瀏覽器可視窗口的寬度和高度

scrollWidth/scrollHeight是當(dāng)前頁(yè)面的真實(shí)寬度和高度（所有屏的高度和寬度的和：是一個(gè)約等于值）

要兼容瀏覽器獲取瀏覽器盒子模型信息我們需要這樣寫(xiě)

document.documentElement[attr] || document.body[attr];
//documentElement在前body在后

//獲取
document.documentElement.clientWidth || document.body.clientWidth;
//設(shè)置
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

6、獲取瀏覽器盒子模型信息的兼容方法

function win(attr,value) {
    //獲取值
    if(typeof value === "undefined") {
        return document.documentElement[attr] || document.body[attr];
    }
    
    document.documentElement[attr] = value;
    document.body[attr] = value;
}

win("clientWidth");

win("scrollTop",0);