資訊專(zhuān)欄INFORMATION COLUMN
摘要：和是一個(gè)只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條如果有邊框和外邊距。一個(gè)典型的是測(cè)量包含元素的邊框水平線(xiàn)上的內(nèi)邊距豎直方向滾動(dòng)條如果有的話(huà)以及設(shè)置的寬度值。
clientWidth和offsetWidth clientWidth
是一個(gè)只讀屬性，返回元素的內(nèi)部寬度，該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條(如果有)、邊框和外邊距。
offsetWidth是一個(gè)只讀屬性，返回一個(gè)元素的布局寬度。一個(gè)典型的offsetWidth是測(cè)量包含元素的邊框、水平線(xiàn)上的內(nèi)邊距、豎直方向滾動(dòng)條(如果有的話(huà))、以及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è)簡(jiǎn)要說(shuō)明，clientWidth值為205是這樣計(jì)算來(lái)的：原本我們?cè)O(shè)置parent的寬度為200,因?yàn)槲覀冊(cè)O(shè)置了父元素overflow:scroll屬性出現(xiàn)滾動(dòng)條后，滾動(dòng)條寬度被包括在這個(gè)設(shè)置的寬度之內(nèi)。chrome瀏覽器滾動(dòng)條默認(rèn)寬度為15，所以parent寬度就只剩185.按照上面clientWidth定義來(lái)計(jì)算，clientWidth = 185(實(shí)際width) + 10(padding) + 10(padding).
未完待續(xù)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51947.html
摘要：表示元素可見(jiàn)課件內(nèi)容的高度，包括以下幾部分可見(jiàn)內(nèi)容包括的高度，隱藏內(nèi)容由于存在垂直滾動(dòng)條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth，通過(guò)字面意思我們知道這是一個(gè)內(nèi)部的寬度，如果有滾動(dòng)條，則包含滾動(dòng)條的寬度 window.innerHeight，表示內(nèi)部可用的高度，如果有滾動(dòng)條，則包含滾動(dòng)條的高度 window.o...
摘要：表示元素可見(jiàn)課件內(nèi)容的高度，包括以下幾部分可見(jiàn)內(nèi)容包括的高度，隱藏內(nèi)容由于存在垂直滾動(dòng)條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth，通過(guò)字面意思我們知道這是一個(gè)內(nèi)部的寬度，如果有滾動(dòng)條，則包含滾動(dòng)條的寬度 window.innerHeight，表示內(nèi)部可用的高度，如果有滾動(dòng)條，則包含滾動(dòng)條的高度 window.o...
摘要：表示元素可見(jiàn)課件內(nèi)容的高度，包括以下幾部分可見(jiàn)內(nèi)容包括的高度，隱藏內(nèi)容由于存在垂直滾動(dòng)條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth，通過(guò)字面意思我們知道這是一個(gè)內(nèi)部的寬度，如果有滾動(dòng)條，則包含滾動(dòng)條的寬度 window.innerHeight，表示內(nèi)部可用的高度，如果有滾動(dòng)條，則包含滾動(dòng)條的高度 window.o...
摘要：容易混淆上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來(lái)搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類(lèi)似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題： offsetWidth offs...
摘要：容易混淆上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來(lái)搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類(lèi)似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來(lái)不說(shuō)話(huà)，先拋出幾個(gè)問(wèn)題： offsetWidth offs...
閱讀 3162·2021-02-22 17:12
閱讀 801·2019-08-30 15:55
閱讀 3253·2019-08-30 15:54
閱讀 1450·2019-08-29 16:56
閱讀 1928·2019-08-29 15:13
閱讀 1784·2019-08-29 13:19
閱讀 669·2019-08-26 13:40
閱讀 2884·2019-08-26 10:26
