
scrollHeight:DOM元素的實際內(nèi)容的高度,不包border的高度,會隨DOM元素中內(nèi)容的增加(超過可視區(qū)后)而變大。
clientHeight:DOM元素內(nèi)容可視區(qū)的高度,不包含滾動條和邊框的高度。
offsetHeight:DOM元素整體的高度,包括滾動條和邊框。
當滾動條不出現(xiàn)的時候
這時候DOM元素中沒有內(nèi)容或者內(nèi)容不超過可視區(qū)
scrollWidth=clientWidth,兩者皆為可視區(qū)的寬度。
scrollHeight=clientHeight,兩者皆為可視區(qū)的高度。
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。
當滾動條出現(xiàn)的時候
這時候DOM元素中沒有內(nèi)容或者內(nèi)容不超過可視區(qū)
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和scrollHeight分別是實際內(nèi)容的寬度和高度
clientWidth和clientHeight分別是內(nèi)容可視區(qū)的寬度和高度
offsetWidth、offsetHeight為DOM元素的整體寬度和高度。
offsetLeft與offsetTop
offsetLeft與offsetTop這兩個屬性值與offsetParent有關(guān)。
offsetParent屬性返回一個對象的引用,這個對象是距離調(diào)用offsetParent的元素最近的(在包含層次中最靠近的),并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(即body元素)的引用。
兩條規(guī)則:
如果當前元素的父級元素沒有進行CSS定位(position為absolute或relative),offsetParent為body。
如果當前元素的父級元素中有CSS定位(position為absolute或relative),offsetParent取最近的那個父級元素。
offsetLeft:對象元素邊界的左上角頂點相對于offsetParent的左上角頂點的水平偏移量;
offsetTop:對象元素邊界的左上角頂點相對于offsetParent的左上角頂點的垂直偏移量;
offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)
offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-top)
當offsetParent為body時情況比較特殊:
在IE8/9/10及Chrome中:
offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當前元素的margin-left)。
在FireFox中:
offsetLeft = (body的margin-left)+(body的padding-left)+(當前元素的margin-left)
