摘要：元素內(nèi)部寬度和高度獲取元素內(nèi)邊距邊框到邊框的距離大概如下圖所示屬性表示元素的內(nèi)部寬度，以像素計(jì)。如上圖所示計(jì)算方式為分為如下兩種存在垂直滾動(dòng)條不存在滾動(dòng)條屬性表示元素內(nèi)部的高度單位像素，包含內(nèi)邊距，但不包括水平滾動(dòng)條邊框和外邊距。

clientWidth、clientHeight 元素內(nèi)部寬度和高度, clientLeft、clientTop 獲取元素內(nèi)邊距邊框到邊框的距離.

大概如下圖所示:

屬性表示元素的內(nèi)部寬度，以像素計(jì)。該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條（如果有）、邊框和外邊距。

如上圖所示, 計(jì)算方式為, 分為如下兩種:

存在垂直滾動(dòng)條

content width + padding - scollbarWidth

不存在滾動(dòng)條

content width + padding

屬性表示元素內(nèi)部的高度(單位像素)，包含內(nèi)邊距，但不包括水平滾動(dòng)條、邊框和外邊距。

如上圖所示, 計(jì)算方式為如下兩種:

存在水平滾動(dòng)條

content height + padding - scollbarWidth

不存在滾動(dòng)條

content height + padding

表示一個(gè)元素的左邊框的寬度.

計(jì)算方式為如下兩種情況:

如果文字方向從右往左(默認(rèn)從左往右,通過設(shè)置 direction: rtl;)進(jìn)行排列,且存在垂直滾動(dòng)條的情況下

border width + scollbar width

默認(rèn)情況下

border width

注意:

如果當(dāng)前元素是行內(nèi)元素(inline)時(shí), clientLeft將返回 0;

表示一個(gè)元素的上邊框的寬度.

把基本的情況介紹完了看看具體實(shí)例,代碼如下:

這是不存在水平和垂直,以及文字按照默認(rèn)情況下排列.

下面我將對上面實(shí)例進(jìn)行如下修改:

給元素 .box 添加 overflow:scroll 讓它顯示滾動(dòng)條, 再來看看每個(gè)值:

如下圖所示:

從輸出答應(yīng)結(jié)果來看, clientWidth 、clientHeight 變小了,也就是說不包含其滾動(dòng)條.

改變?nèi)萜魑淖州敵龇较?看看 clientLeft 值會(huì)不會(huì)像之前說的會(huì)加上滾動(dòng)條的width ?

如下圖所示:

從打印結(jié)果來看, 改變文字方向(rtl)并且存在處置滾動(dòng)條情況下：clientLeft = scrollbarWidth + borderLeftWidth

默認(rèn)情況下(沒有滾動(dòng)條情況下) 
clientWidth = content width + paddingLeftWidth + paddingRightWidth;
對上面示例來說 clientWidth = 200 + 10 + 10;

有滾動(dòng)條情況下：
clientWidth = (content width + paddingLeftWidth + paddingRightWidth) - scrollbarWidth

可以推斷出滾動(dòng)條計(jì)算方式:
scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth;

clientWidth 已知, 從上面公式來看只要知道內(nèi)容區(qū)域大小和左右padding值即可

    var ele = document.querySelector("#box");
    var computedStyle = window.getComputedStyle(ele);
    var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滾動(dòng)條)
    var ceil = function(v){
        return Math.ceil(parseFloat(v))
    }
    var maxClientWidth = offsetWidth
        - ceil(computedStyle.borderLeftWidth)
        - ceil(computedStyle.borderRightWidth);  // ClientWidth 最大值(理想情況下, 也就是不存在滾動(dòng)條)

    var scrollbarWidth = maxClientWidth          // 滾動(dòng)條大小
        - ceil(ele.clientWidth);

    console.log(scrollbarWidth); // 17

這樣就計(jì)算出滾動(dòng)條的 width, 高度同理可得.

上面因?yàn)槭褂?getComputedStyle 只能兼容到 IE9+、Chrome、Firefox、Safari 等 , 需要兼容IE8以及以下版本,可以作下兼容處理:

    // 這里如果IE8以下則需要改為 getElementById
    var selector = function (selectorName) {
        if (!selectorName && !(typeof selectorName === "string")) { return {} };
        var prefix = /^#/;
        if (document.querySelector) {
            selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;
            return document.querySelector(selectorName);
        } else if(document.getElementById) {
            selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;
            return document.getElementById(selectorName);
        }
    }

    var selector = selector("box");  
    var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);
    var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滾動(dòng)條)
    var ceil = function (v) {
        return Math.ceil(parseFloat(v))
    }
    var maxClientWidth = offsetWidth
        - ceil(computedStyle.borderLeftWidth)
        - ceil(computedStyle.borderRightWidth);  // ClientWidth 最大值(理想情況下, 也就是不存在滾動(dòng)條)

    var scrollbarWidth = maxClientWidth          // 滾動(dòng)條大小
        - ceil(ele.clientWidth);

    console.log(scrollbarWidth); // 17

可用區(qū)域其實(shí)就是內(nèi)容可以排放的空間, 其可見區(qū)域?qū)挾绕鋵?shí)就是 clientWidth - paddingLeftWidth - paddingRightWidth 的值. 

比求滾動(dòng)條寬度相對簡單點(diǎn), 只需要知道左右內(nèi)邊距的大小即可.

     var selector = function (selectorName) {
        if (!selectorName && !(typeof selectorName === "string")) { return {} };
        var prefix = /^#/;
        if (document.querySelector) {
            selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;
            return document.querySelector(selectorName);
        } else if(document.getElementById) {
            selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;
            return document.getElementById(selectorName);
        }
    }

    var selector = selector("box");  
    var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);
    var ceil = function (v) {
        return Math.ceil(parseFloat(v))
    }
    console.log(ele.clientWidth - ceil(computedStyle.paddingLeft) - ceil(computedStyle.paddingRight));

上面計(jì)算方式?jīng)]有什么固定,僅供參考. 更好計(jì)算方式也可以推薦下. ~ 比如通過 getBoundingClientRect() 等.

如果有什么錯(cuò)誤問題地方,請大家指出 謝謝~