JS中的盒子模型

前言

• 主要目的：
  • 因爲目前掌握的獲取元素樣式的方法十分有限，因此盒子模型主要是用來獲取元素的樣式的（操做DOM）
• 定義:
  • 基於一些屬性和方法，讓咱們可以獲取到當前元素的樣式信息，例如：clientWidth 、offsetWidth等

屬性

共計13種，分三個系列，分別是：client、offset、scroll。

1、client 系列

一、clientWidth / Height

• 定義：獲取盒子可視區域的寬高（內容寬度+左右 padding ）
• 特色：
  • 1.內容溢出與否對他無影響
  • 2.獲取的結果是沒有單位的（其他的盒模型屬性也是）
  • 3.獲取的結果是整數，它會本身進行四捨五入（其他的盒模型屬性也是）
• 使用:
  • box.clientWidth
  • box.clientHeight
• 拓展：

  • 一、獲取當前頁面一屏幕（可視化）區域的寬高

    • 寬：let winW = document.documentElement.clientWidth || document.body.clientWidth;
    • 高：let winH = document.documentElement.clientHeight || document.body.clientHeight;
    • 注意：前面 documentElement 在低版本瀏覽器下不兼容

  • 二、利用JS實現盒子居中

    原理：（一屏幕的寬度-盒子的寬度）/2 === LEFT

    

二、clientLeft / Top

• 定義：
  • box.clientLeft獲取盒子左邊框的大小
  • box.clientTop獲取盒子上邊框的大小

2、offset 系列

一、offsetWidth / Height

• 定義：獲取當前元素的總寬度/高度
  • 至關於在 client 的基礎上加上 border == 盒子自己的寬高
• 特色：(與 client 一致)
  • 1.內容溢出與否對他無影響
  • 2.獲取的結果是沒有單位的（其他的盒模型屬性也是）
  • 3.獲取的結果是整數，它會本身進行四捨五入（其他的盒模型屬性也是）
• 使用：
  • box.offsetWidth / Height

二、offsetLeft / Top

• 定義：距離其父參照物的左偏移/上偏移（當前元素的外邊框到父參照物的裏邊框）
• 使用：
  • box.offsetLeft/Top

三、offsetParent

• 定義：獲取它的父參照物（不必定是父元素）
  • 父參照物和它的父元素沒有必然的聯繫

父參照物查找：同一個平面中，最外層元素是全部後代元素的父參照物

• 而基於 position:relative / absolute / fixed 可讓元素脫離文檔流（一個新的平面），從而改變元素的父參照物
• 通俗來講，也就是：元素的父級參照物在默認狀況下都是body，若是給一個元素增長position屬性(absolute，relative、fixed)，會讓他全部子孫元素的父級參照物都指向當前這個元素

• 注意：
  • document.body.offsetParent === null;
• 使用：
  • box.offsetParent
• 拓展：
  • 封裝一個方法獲取一個元素距離body的左、上偏移量（不論其父參照物是誰）

/* * offset：獲取當前元素距離BODY的左/上偏移（不論其父參照物是誰） * @params * curEle:current element當前要操做的元素 * @return * [object]包含上/左偏移的信息 => {top:xxx,left:xxx} */
function offset(curEle) {
    let par = curEle.offsetParent,
        l = curEle.offsetLeft,
        t = curEle.offsetTop;
    //存在父參照物，並且尚未找到BODY，BOBY的邊框不作考慮的狀況
    while (par && par.tagName !== "BODY") {
        //在原有偏移的基礎上累加：父參照物的邊框、父參照物的偏移
        if (!/MSIE 8\.0/.test(navigator.userAgent)) {
            //IE8中偏移值自已就算了邊框了，不須要咱們在加邊框的值 navigator.userAgent獲取當前瀏覽器的版本信息
            l += par.clientLeft;
            t += par.clientTop;
        }
        l += par.offsetLeft;
        t += par.offsetTop;
        //繼續獲取上級參照物
        par = par.offsetParent;
    }
    return {
        top: t,
        left: l
    };
}
複製代碼

• 在不考慮IE8版本和body有邊框的狀況下可簡寫爲

function offset(curEle) {
    let left = curEle.offsetLeft;
    let top = curEle.offsetTop;
    let parent = curEle.offsetParent;
    // 上來第一步先獲取當前元素的偏移量和父級參照物
    while (parent !== document.body) {
        // 檢測一下當前元素的父級參照物是否是body，若是不是就累加上父級參照物的邊框的寬度和偏移量
        left += parent.clientLeft + parent.offsetLeft;
        top += parent.clinetTop + parent.offsetTop;
        // 在獲取父級參照物的父級參照物，直到獲取到body爲止
        parent = parent.offsetParent;
        }
        return {
            left: left,
            top:top
        }
    }
複製代碼

3、scroll 系列

一、scrollWidth / Height

• 定義：

  • 在沒有內容溢出的狀況下，獲取的結果和 client 是同樣的
  • 在有內容溢出的狀況下，獲取的結果約等於真實內容的寬高（左/上PADDING + 真實內容的寬度/高度）

• 注意：

  在內容超出的狀況下

  • 1.不一樣瀏覽器獲取的結果不盡相同
  • 2.設置 overflow 屬性值對最後的結果也會產生必定的影響

• 使用：

  • box.scrollWidth
  • box.scrollHeight

• 拓展：

  獲取整個頁面真實的高度

  • document.documentElement.scrollHeight || document.body.scrollHeight

二、box.scrollTop / Left

• 定義：豎向 / 橫向 滾動條捲去的高度
• 特色：
  • 1.邊界值
    • min = 0
    • max =（整個的高度scrollHeight） - （一屏幕高度clientHeight）

    利用邊界值：

    • 一、快速定位到頂部：box.scrollTop=0;
    • 二、快速定位到底部：box.scrollTop = box.scrollHeight-box.clientHeight

  • 2.可讀寫
    • 13個盒子模型屬性，只有這兩個是「可讀寫」的屬性（既能夠獲取也能夠設置對應的值）
    • 其他的都是「只讀」屬性（不能設置值，只能獲取）
• 使用：
  • box.scrollTop
  • box.scrollLeft
• 實例：
  • 回到頂部

// 1.當瀏覽器滾動條滾動的時候，咱們進行驗證：捲去的高度超過兩屏，咱們讓#LINK顯示
function check() {
	//winH:一屏幕高度 scrollT:捲去的高度
	let winH = HTML.clientHeight,
	    scrollT = HTML.scrollTop;
	LINK.style.display = scrollT >= winH * 2 ? 'block' : 'none';
}
window.onscroll = check;

// 2.點擊回到頂部
LINK.onclick = function () {
    /* 讓按鈕隱藏 */
    LINK.style.display = 'none';
    //先禁止滾動事件觸發（由於在回到頂部的運動過程當中，若是事件一直在，會計算按鈕顯示隱藏的樣式，沒法讓按鈕隱藏）
    window.onscroll = null;
    
    /* 實現動畫 */
    let step = 1000;
    let timer = setInterval(() => {
        //每一次獲取最新的SCROLL-TOP值，在現有的基礎上減去步長，讓其走一步
	let curT = HTML.scrollTop;
	if (curT === 0) {
	    //邊界判斷：已經回到頂部後，咱們清除定時器
	    clearInterval(timer);
	    //恢復滾動條滾動的監聽事件
	    window.onscroll = check;
	    return;
	}
	curT -= step;
	HTML.scrollTop = curT;
    }, 17);//13~17ms動畫兼容最好，IE最好用17
};

//利用定時器
//SET-INTERVAL：設置一個定時器（TIMER表明這個定時器），每間隔INTERVAL這麼久，就會把FUNCTUION執行一次...一直到手動清除定時器爲止
// let timer = setInterval([FUNCTUION], [INTERVAL]);
// clearInterval(timer);
複製代碼

方法

1、getComputedStyle（獲取CSS樣式的最優方案）

• 定義：獲取當前元素全部通過瀏覽器計算過的樣式
• 特色：
  • 只要元素在頁面中呈現出來，那麼全部的樣式都是通過瀏覽器計算的
  • 哪怕你沒有設置和見過的樣式也都計算了
  • 無論你寫或者不寫，也不輪寫在哪，樣式都在這，能夠直接獲取
• 注意：在IE6~8瀏覽器中不兼容，須要基於currentStyle來獲取
• 語法：
  • window.getComputedStyle([ELEMENT],[僞類])
  • 第一個參數是操做的元素 / 第二個參數是元素的僞類:after/:before
  • 通常第二個參數都寫 null 或不寫
  • 獲取的結果是CSSStyleDeclaration這個類的實例（對象），包含了當前元素全部的樣式信息
• 使用：

let styleObj = window.getComputedStyle([element],null);
styleObj["backgroundColor"];
styleObj.display;
複製代碼

2、currentStyle

• 注意：與 getComputedStyle 一致，此方法用於IE6～8瀏覽器
• 使用：styleObj = [element].currentStyle;

因爲目前操做DOM逐漸被弱化，JS盒子模型逐漸被弱化