scrollHeight、clientHeight、offsetHeight、offsetLeft、offsetTop的區(qū)別

scrollHeight,clientHeight,offsetHeight的區(qū)別

scrollHeight:DOM元素的實(shí)際內(nèi)容的高度,不包border的高度,會(huì)隨DOM元素中內(nèi)容的增加(超過(guò)可視區(qū)后)而變大。

clientHeight:DOM元素內(nèi)容可視區(qū)的高度,不包含滾動(dòng)條和邊框的高度。

offsetHeight:DOM元素整體的高度,包括滾動(dòng)條和邊框。


當(dāng)滾動(dòng)條不出現(xiàn)的時(shí)候

這時(shí)候DOM元素中沒(méi)有內(nèi)容或者內(nèi)容不超過(guò)可視區(qū)
scrollWidth=clientWidth,兩者皆為可視區(qū)的寬度。
scrollHeight=clientHeight,兩者皆為可視區(qū)的高度。
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。

當(dāng)滾動(dòng)條出現(xiàn)的時(shí)候

這時(shí)候DOM元素中沒(méi)有內(nèi)容或者內(nèi)容不超過(guò)可視區(qū)
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和scrollHeight分別是實(shí)際內(nèi)容的寬度和高度
clientWidth和clientHeight分別是內(nèi)容可視區(qū)的寬度和高度
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。
offsetLeft與offsetTop

offsetLeft與offsetTop這兩個(gè)屬性值與offsetParent有關(guān)。

offsetParent屬性返回一個(gè)對(duì)象的引用,這個(gè)對(duì)象是距離調(diào)用offsetParent的元素最近的(在包含層次中最靠近的),并且是已進(jìn)行過(guò)CSS定位的容器元素。 如果這個(gè)容器元素未進(jìn)行CSS定位, 則offsetParent屬性的取值為根元素(即body元素)的引用。

兩條規(guī)則:

如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行CSS定位(position為absolute或relative),offsetParent為body。

如果當(dāng)前元素的父級(jí)元素中有CSS定位(position為absolute或relative),offsetParent取最近的那個(gè)父級(jí)元素。

offsetLeft:對(duì)象元素邊界的左上角頂點(diǎn)相對(duì)于offsetParent的左上角頂點(diǎn)的水平偏移量;

offsetTop:對(duì)象元素邊界的左上角頂點(diǎn)相對(duì)于offsetParent的左上角頂點(diǎn)的垂直偏移量;

offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當(dāng)前元素的margin-left)

offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當(dāng)前元素的margin-top)

當(dāng)offsetParent為body時(shí)情況比較特殊:

在IE8/9/10及Chrome中:
offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當(dāng)前元素的margin-left)。

在FireFox中:
offsetLeft = (body的margin-left)+(body的padding-left)+(當(dāng)前元素的margin-left)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容