clientWidth offsetWidth等視窗尺寸

songjz 發(fā)布于2019-08-01 18:40 / 1520人閱讀

摘要：和是一個(gè)只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條如果有邊框和外邊距。一個(gè)典型的是測量包含元素的邊框水平線上的內(nèi)邊距豎直方向滾動(dòng)條如果有的話以及設(shè)置的寬度值。

clientWidth和offsetWidth clientWidth

是一個(gè)只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條(如果有)、邊框和外邊距。

offsetWidth

是一個(gè)只讀屬性，返回一個(gè)元素的布局寬度。一個(gè)典型的offsetWidth是測量包含元素的邊框、水平線上的內(nèi)邊距、豎直方向滾動(dòng)條(如果有的話)、以及CSS設(shè)置的寬度(width)值。
用法：var offsetWidth = element.offsetWidth;





    
    
    
    Document

當(dāng)我們給上面parent元素加上邊框內(nèi)邊距時(shí)：

 #parent {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid black;
            padding: 10px;
        }

輸出結(jié)果為：
// 220
// 240
現(xiàn)在我們給parent加一個(gè)子元素，并讓滾動(dòng)條出現(xiàn)，完整代碼如下：





    
    
    
    Document

顯示結(jié)果如圖：

輸出信息如下：
// 205
// 240
對(duì)于上述代碼作個(gè)簡要說明，clientWidth值為205是這樣計(jì)算來的：原本我們設(shè)置parent的寬度為200,因?yàn)槲覀冊O(shè)置了父元素overflow:scroll屬性出現(xiàn)滾動(dòng)條后，滾動(dòng)條寬度被包括在這個(gè)設(shè)置的寬度之內(nèi)。chrome瀏覽器滾動(dòng)條默認(rèn)寬度為15，所以parent寬度就只剩185.按照上面clientWidth定義來計(jì)算，clientWidth = 185(實(shí)際width) + 10(padding) + 10(padding).

未完待續(xù)