关于前端:页面offsetscoll等属性详解

104次阅读

共计 887 个字符,预计需要花费 3 分钟才能阅读完成。

             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 页面(能够获得滑动条上面的地位):

正文完
 0