資訊專欄INFORMATION COLUMN
摘要：和是一個只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動條如果有邊框和外邊距。一個典型的是測量包含元素的邊框水平線上的內(nèi)邊距豎直方向滾動條如果有的話以及設(shè)置的寬度值。
clientWidth和offsetWidth clientWidth
是一個只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動條(如果有)、邊框和外邊距。
offsetWidth是一個只讀屬性，返回一個元素的布局寬度。一個典型的offsetWidth是測量包含元素的邊框、水平線上的內(nèi)邊距、豎直方向滾動條(如果有的話)、以及CSS設(shè)置的寬度(width)值。
用法：var offsetWidth = element.offsetWidth;
Document
當我們給上面parent元素加上邊框內(nèi)邊距時：
#parent {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
padding: 10px;
}
輸出結(jié)果為：
// 220
// 240
現(xiàn)在我們給parent加一個子元素，并讓滾動條出現(xiàn)，完整代碼如下：
Document
顯示結(jié)果如圖：
輸出信息如下：
// 205
// 240
對于上述代碼作個簡要說明，clientWidth值為205是這樣計算來的：原本我們設(shè)置parent的寬度為200,因為我們設(shè)置了父元素overflow:scroll屬性出現(xiàn)滾動條后，滾動條寬度被包括在這個設(shè)置的寬度之內(nèi)。chrome瀏覽器滾動條默認寬度為15，所以parent寬度就只剩185.按照上面clientWidth定義來計算，clientWidth = 185(實際width) + 10(padding) + 10(padding).
未完待續(xù)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51947.html
摘要：表示元素可見課件內(nèi)容的高度，包括以下幾部分可見內(nèi)容包括的高度，隱藏內(nèi)容由于存在垂直滾動條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth，通過字面意思我們知道這是一個內(nèi)部的寬度，如果有滾動條，則包含滾動條的寬度 window.innerHeight，表示內(nèi)部可用的高度，如果有滾動條，則包含滾動條的高度 window.o...
摘要：容易混淆上來不說話，先拋出幾個問題是時候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...
摘要：容易混淆上來不說話，先拋出幾個問題是時候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...
閱讀 3109·2021-02-22 17:12
閱讀 732·2019-08-30 15:55
閱讀 3114·2019-08-30 15:54
閱讀 1401·2019-08-29 16:56
閱讀 1872·2019-08-29 15:13
閱讀 1733·2019-08-29 13:19
閱讀 612·2019-08-26 13:40
閱讀 2833·2019-08-26 10:26
