在学习offset的相关属性前,必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,返回12,而不是'12px')。
定位父元素:指在CSS中某一元素domElement[position:relative/absolute]所相对定位的元素。
1、offsetParent
对于offsetParent来讲,最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。
a、domElement设置了position:relative/absolute属性:
domElement.offsetParent指向的是该元素的定位父元素。
但也有一个bug,见一下代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>RainMan</title> <styletype="text/css"> #target{position:relative;} </style> <scripttype="text/javascript"> window.onload=function(){ vartarget=document.getElementById('target'); alert(target.offsetParent==document.documentElement); //IE中指向<html>元素 alert(target.offsetParent==document.body); //FF、Safari等指向<body>元素 }; </script> </head> <body> <divid="outer"class="test"> <divid="inner"> <divid="target"class="test">Target<br/>rainman</div> </div> </div> </body> </html>
b、domElement没有设置position:relative/absolute,即static:
这一点所有的浏览器基本相同,domElement的offsetParent指向的是离domElement最近的拥有position:relative/absolute属性的父级元素。若不存在,则指向 <body>元素。但这种情况也有例外,如果domElement是<td>则 offsetparent 指向<table>
c、关于offsetParent的实例:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>RainMan</title> <styletype="text/css"> #outer{position:absolute;} </style> <scripttype="text/javascript"> window.onload=function(){ vartarget=document.getElementById('target'); varouter=document.getElementById('outer'); alert(target.offsetParent==outer); //true }; </script> </head> <body> <divid="outer"class="test"> <divid="inner"> <divid="target"class="test">Target<br/>rainman</div> </div> </div> </body> </html> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>RainMan</title> <styletype="text/css"> </style> <scripttype="text/javascript"> window.onload=function(){ vartarget=document.getElementById('target'); alert(target.offsetParent==document.body); //true }; </script> </head> <body> <divid="outer"class="test"> <divid="inner"> <divid="target"class="test">Target<br/>rainman</div> </div> </div> </body> </html>
2、offsetLeft/Top
offsetLeft: 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离。
offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>RainMan</title> <styletype="text/css"> *{margin:0px;padding:0px;} .test{ padding:5px; margin:10px; color:#fff; border:7pxsolid#000; background-color:#CC66FF; } #target{ position:absolute; left:3px; top:9px; width:100px; height:100px; } #outer{ position:relative; width:300px; height:300px; } </style> <scripttype="text/javascript"> window.onload=function(){ vartarget=document.getElementById('target'); alert(target.offsetLeft); //13=margin-10px+left-3px }; </script> </head> <body> <divid="outer"class="test"> <divid="inner"> <divid="target"class="test">Target<br/>rainman</div> </div> </div> </body> </html>
3、offsetWidth/offsetHeight
给出元素在页面中占据的宽度和高度的总计。注意:把元素的边框和滚动条计算在内。
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width; offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;
4、相关应用
a、获得一个元素的实际宽度和高度,例如:一个自适应高度的段落,往往可以通过获得该元素CSS层叠后的最终高度【见下代码】,但是这种方法在IE中有时返回的是auto,所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。
function getStyle(elem,type){ var typeface=''; if(elem.currentStyle) typeface=elem.currentStyle[type]; elseif(window.getComputedStyle) typeface=window.getComputedStyle(elem,null)[type]; returntypeface; }
获得一个元素位置的可移植的方法:在窗口中的位置
function getX(elem){ var x=0; while(elem){ x=x+elem.offsetLeft; elem=elem.offsetParent; } return x; } function getY(elem){ var y=0; while(elem){ y=y+elem.offsetTop; elem=elem.offsetParent; } return y; }
转载自:http://tech.ddvip.com/web/javascript/index.html