寒风载誉英雄归

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js中有 offset scorll client 俗称“三大家族”。

  • offset家族:

 offsetheight=height+padding+border;

 offsetwidth=width+padding+border;(offsethight和offsetwidth都不包括margin);

两者调用对象均为盒子!  

offsettop=距离最近一个有定位的父盒子的上边的距离;    

offsetleft=距离最近一个有定位的父盒子的左边的距离;(除了static定位其他的都可以)

如果找不到有定位的父盒子则以body为准!  

如果在行内式中给定 style.left,则style.left==offsetleft。

offsetleft与style.left的区别:

一.offsetleft可以返回左侧没有定位的距离,即与body的距离。而style.left只能获取行内式;

二.offsetleft返回的是数字,而style.left返回的是字符串!  

三.offsetleft只能获取值,而style.left可以赋值;

四.如果没有给style.left赋值,则返回空字符串。

  •        scorll家族

scrollwidth和scrollheight在盒子内容没有超出盒子的宽高的情况下=width/height+border,如果超出盒子高度,即为内容本身的高度。

scrolltop和scrollleft =被卷去的高度或者宽度,他们的调用者不是盒子(盒子也可以调用但是必须有滚动条)!  

关于兼容性问题:

先判断window.pageYoffset!==undefind

如果为true则 top:window.pageYoffset;

else则判断有没有DTD声明

如果为true则 top:document.documenElement.scrollTop

else则为 top:document.body.scrollTop;

  •        client家族

clientWidth和clientHeight 在盒子调用的时候 指的是本盒子的宽高。

在其他调用时 兼容性问题先判断 

window.innerWidth是不是存在

else判断是不是有DTD

如果有document.documentElement.clientWidth

else  docunment.body.clientWidth

 

 

clientX event 调用 鼠标距离可视左边的距离!

pageX  是距离body的距离!

 

posted on 2018-07-23 19:28  寒风载誉英雄归  阅读(156)  评论(0)    收藏  举报