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

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

大概如下圖所示:

屬性表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。

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

存在垂直滾動條

content width + padding - scollbarWidth

不存在滾動條

content width + padding

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

如上圖所示, 計算方式為如下兩種:

存在水平滾動條

content height + padding - scollbarWidth

不存在滾動條

content height + padding

表示一個元素的左邊框的寬度.

計算方式為如下兩種情況:

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

border width + scollbar width

默認情況下

border width

注意:

如果當前元素是行內元素(inline)時, clientLeft將返回 0;

表示一個元素的上邊框的寬度.

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

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

下面我將對上面實例進行如下修改:

給元素 .box 添加 overflow:scroll 讓它顯示滾動條, 再來看看每個值:

如下圖所示:

從輸出答應結果來看, clientWidth 、clientHeight 變小了,也就是說不包含其滾動條.

改變容器文字輸出方向,看看 clientLeft 值會不會像之前說的會加上滾動條的width ?

如下圖所示:

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

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

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

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

clientWidth 已知, 從上面公式來看只要知道內容區域大小和左右padding值即可

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

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

    console.log(scrollbarWidth); // 17

這樣就計算出滾動條的 width, 高度同理可得.

上面因為使用 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 (包含滾動條)
    var ceil = function (v) {
        return Math.ceil(parseFloat(v))
    }
    var maxClientWidth = offsetWidth
        - ceil(computedStyle.borderLeftWidth)
        - ceil(computedStyle.borderRightWidth);  // ClientWidth 最大值(理想情況下, 也就是不存在滾動條)

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

    console.log(scrollbarWidth); // 17

可用區域其實就是內容可以排放的空間, 其可見區域寬度其實就是 clientWidth - paddingLeftWidth - paddingRightWidth 的值. 

比求滾動條寬度相對簡單點, 只需要知道左右內邊距的大小即可.

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

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

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