
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)
