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的距离!