页面offset,scoll等属性详解

             Offset等页面属性

offset(偏移量): offsetParent可以确定元素其最近的已经定位的父元素。
1.OffsetTop:元素相对于最近已经定位的父元素的顶部偏移量
注:css元素没有定义,则父元素为body;

 相对父元素:相对于其Content(width,height)的偏移量
 

2.OffsetLeft:定义相同 ,相对最近定位父元素的左侧偏移量

3.OffsetWidth:元素的宽度:=width+padding2+border2

4.OffsetHeight:元素的高度:=height+padding2+border2

/以下属性通过点击触发取得鼠标点击位置距离定位的元素的*/
5.OffsetX:鼠标点击位置相对于最近父元素的位置,不同于OffsetTop (可以加上鼠标的移动)

   通过'click'事件,用e.offsetX来取值
   这是一个更加灵活的鼠标实时的偏移量

6.OffsetY同上

            Scroll等页面属性

scroll指滚动,包括这个元素没显示出来的实际宽度,包括padding,不包括滚动条、border
为什么要用:
页面不只浏览器框框这么大,所有要sroll来显示实际的页面
1.Scollwidth:元素的所有宽度,包括滑动条左右的没有显示的部分
ScollHeight:元素的所有高度,包括滑动条底部没有显示

2.ScollTop和ScollLeft(滑动条滑动的距离):前提调节:标签内部的内容超过标签对超过的内容设置了overflow_x 或者overflow-Y*

           Client页面属性

client指代客户端 :内容的宽高(去除内容的边框)
*offsetHeight:height + padding + border
(clientHeight: height + padding)
client:鼠标位置相对于客户端(屏幕去除上方工具栏和右边,下边的滑动条)
补充一下:clientWidth无法取到边框,用clientTop来取到边框*
screenX,screenY:指代整个的屏幕位置;(就只是一页)
pagex,pageY:是整个html页面(可以取得滑动条下面的位置):

你可能感兴趣的:(前端)