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