js的offsetTop到底是距离父元素的距离还是距离body的距离,或者是屏幕顶端的距离啊?好混乱

JavaScript019

js的offsetTop到底是距离父元素的距离还是距离body的距离,或者是屏幕顶端的距离啊?好混乱,第1张

屏幕顶端的距离

网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

(javascript)document.documentElement.scrollTop //firefox

(javascript)document.documentElement.scrollLeft //firefox

(javascript)document.body.scrollTop //IE

(javascript)document.body.scrollLeft //IE

(jqurey) $(window).scrollTop()

(jqurey) $(window).scrollLeft()

网页工作区域的高度和宽度

(javascript) document.documentElement.clientHeight// IE firefox

(jqurey) $(window).height()

元素距离文档顶端和左边的偏移值

(javascript)DOM元素对象.offsetTop //IE firefox

(javascript)DOM元素对象.offsetLeft //IE firefox

(jqurey) jq对象.offset().top

(jqurey) jq对象.offset().left

先来一张名气很大的图

看着实在是好晕,于是各种整理后手动画了一个:

发现主要分为几部分:

当定位时,position的移动的距离,

scrollHeight:文档总高度,可滚动总高度(包含元素本身,内外边距,边框)

scrollWidth:文档总宽度,可滚动总宽度(包含元素本身,内外边距,边框)

scrollTop:相对于滚动条顶部的偏移,指滚动条顶端与当前滚动条位置的距离

scrollLeft:相当于滚动与左端的偏移

clientHeight:可视区域高度(不包含边框,滚动条)

clientWidth:可视区域宽度

clientTop:内容区域相对于整个元素的左上角,当有边距时为边距的厚度,无边距时可以为0

clientLeft:内容区域相对于整个区域的左上角,有边距时为边距的宽度,可以为0

offsetHeight:获取自身元素(包含边距,滚动条)

offsetWidth:获取自身元素(包含边距,滚动条)

offsetTop:相对于最近定位祖元素的偏移,(祖元素必须是position,relative,absloute,fixed)

offsetLeft:同offsetTop

返回第一个祖定位元素,若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。