网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)
(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,若父级元素已经定位返回相对应父级对应元素。