javascript基礎總結（三）——盒子模型

一、js中的盒子模型

經過js中提供一系列的方法和屬性獲取頁面中元素的樣式信息值；

二、client系列

內容的寬高：是給元素定義的width/height這兩個樣式。若是沒有設置height值，容器的高度會根據裏面內容本身適應，這樣獲取的值就是真實的內容的高；若是設置固定的高度，無論內容是多少，內容的高度指的都是設定的這個值；

真實內容的寬高：若是設置的height是200px，若是內容有溢出，那麼真實內容的高度是把溢出內容的高度也要加起來；

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

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

三、offset系列

offsetHeight || offsetWidth
//clientHeight/clientWidth + 左右/上下邊框（和內容是否溢出沒有關係）

offsetParent
//當前元素的父級參照物

offsetLeft || offsetTop 
//當前元素的外邊框距離父級參照物的內邊框的偏移量

計算元素距離body的上部和左部的距離

function offset(el) {
    var oLeft   = el.offsetLeft,
        oTop    = el.offsetTop,
        oParent = el.offsetParent;
    while(oParent) {
        //ie8下不計算邊框
        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}

注：在標準的IE8瀏覽器中，咱們使用offsetLeft/offsetTop實際上是把父級參照物的邊框已經算在內，在IE8瀏覽器下就不須要單獨加邊框了；

四、scroll系列

scrollHeight || scrollWidth
//真實內容的高度/寬度（包含溢出）+ 左填充/上填充
//注:獲取到的結果都是約等於的值，由於同一個瀏覽器是否設置overflow=hidden對於最終的結果是有影響的；在不一樣的瀏覽器中咱們獲取的結果也是不一樣的。

scrollTop || scrollLeft 
//滾動條捲去的高度

五、操做瀏覽器自己盒子模型信息

1. clientWidth/clientHeight是當前瀏覽器可視窗口的寬度和高度

2. scrollWidth/scrollHeight是當前頁面的真實寬度和高度（全部屏的高度和寬度的和：是一個約等於值）

3. 要兼容瀏覽器獲取瀏覽器盒子模型信息咱們須要這樣寫

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

//獲取
document.documentElement.clientWidth || document.body.clientWidth;
//設置
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

<!--注:都須要寫兩個-->

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

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);