offset (偏移,用来检测盒子的位置)
--------------------------------------------------------------------
OffsetWidth/OffsetHeight = width/height +border +padding
1. js中自动检测(不方便给宽高)的目标元素的占位宽高。
clientHeight/clientWidth = width + padding
1.透过浏览器看内容的区域的高度,即浏览器窗口里的内容高度。
scrollHeight
1.是内部元素的绝对宽度,包含内部元素的隐藏的部分
var scrollTop = document.documentElment.scrollTop || document.body.scrollTop
var offsetHeight = document.documentElment.offsetHeight|| document.body.offsetHeight
clientWidth/clientHeight/scrollHeight/offsetLeft/scrollTop/offsetTop 在获取document的属性值时都需要上面的写法兼容IE
----------------------------------------------------------------------
obj.offsetLeft
1.obj有定位,并且有带有定位的父级盒子,检测当前盒子距离父级盒子,从自身padding左边框到父亲的左侧外边框开始算。
2.如果父级都没有定位,或者自己没有定位,则以body为准。(均不包含border);注意在IE7以下,body.offsetTop = 15;margin默认15;
3.只读属性,返回数字;(只读就是不能修改,只能获取数字)
scrollTop =scrollHeight - clientHeight
是滚动条隐藏的部分
----------------------------------------
obj.style.left:
1. left是定位以后才有的
2.这个值是有单位的,可修改的,区别于offsetLeft
offsetParent:
1.返回带有定位的距离最近的父级。层层往上找。
2.返回对象:父级元素,盒子。alert(son.offsetParent.tagName)
3.如果所有父级都没有定位,找到body
parentNode :
1. 只要直接的父级,
2.返回对象:父级元素,盒子。alert(son.parentNode.tagName)
关于offset求绝对位置的方法:
function offset(obj){
var t=0
var l =0
while(obj){
t+=obj.offsetTop
l+=obj.offsetLeft
obj = obj.offsetParent//wrap3没有父级,返回为null,obj= false;while停止执行。
}
return{left:l,top:t}
}
//返回是在函数里面
不同浏览器的各个属性不尽相同,这里只是简单叙述。
可以参考该链接;
http://blog.csdn.net/fswan/article/details/17238933