offset/client/scroll一些总结
1.offset
首先offset共有五个值
1.offsetParent
2.offsetTop
3.offsetLeft
4.offsetWidth
5.offsetHeight
先看代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> body{ border:10px solid blue; margin:10px; padding:10px; background:#eee; } #show{ width:400px; height:200px; background:green; border:10px solid red; padding:10px; color:white; } </style> <script type="text/javascript"> window.onload=function (){ var obj=document.getElementById("show"); obj.innerHTML="<p>Browser:"+window.navigator.userAgent+"</p>"+ "<p>offsetWidth:"+obj.offsetWidth+"</p>"+ "<p>offsetHeight:"+obj.offsetHeight+"</p>"+ "<p>:offsetLeft"+obj.offsetLeft+"</p>"+ "<p>:offsetTop"+obj.offsetTop+"</p>"; } </script> </head> <body> <div id="show"></div> </body>
效果图;
1.offset-width和offset-heigh
不难发现(offset-width和offset-height),除了ie7以外,其他的值都是一样的。
总结:offsetWidth与offsetHeight有个特点,就是这两个属性的值只与该元素有关(也就是说与定位哪些无关)
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
说白了,offsetwidth(height)其实求的就是元素的盒子模型width(height)值;
ps:为什么ie7下的会少一个px呢(等哈在讨论)
2.offsetTop和offLeft
这两个值就涉及到定位的问题;
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> #outer{ width:200px; height:200px; background:green; position:relative; color:white; } #inner{ height:50px; margin-left:40px; width:50px; background:blue; border:10px solid gray; position:absolute; left:10px; padding-left:10px; } </style> <script type="text/javascript"> window.onload=function (){ var obj=document.getElementById("inner"); obj.innerHTML=obj.offsetLeft; } </script> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body>
效果:
结论:
定义:返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。
当有定位的情况下:
从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。
在这里我们发现:(默认的参照物体是offsetParent)
offsetLeft=left+margin-left,其中padding-left在此处没有效果
ps:当我们使用absolue(relative)进行定位之后,我们直接使用left,就可以是精确,方便的定位了,一般不会再用到margin-left
或者padding-left来控制元素的位置 了滴呀;所以大多数情况下offsetLeft就等于left的值滴呀
当没有定位的情况下
默认参照的物体就是我们的body(也可以理解成我们浏览器窗口)这个时候:
如果理解成body
offsetLeft=body的margin-left,padding-left,
如果理解成浏览器窗口
offsetleft=元素相对浏览器窗口左边的距离
3.offsetParent(涉及到定位的知识)
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
总的来说两条规则:
1、如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
2、如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
4.clientwidth和clientHeight
这里来两个属性,比较好理解,指定的就是可视区域的宽度和高度。
5.scrollTop和scrollLeft
这个是用于,当出现滚动条的时候,获取被卷曲的高度和宽度。