javascript获得元素的尺寸和位置

最新推荐文章于 2025-04-02 00:02:16 发布

原创最新推荐文章于 2025-04-02 00:02:16 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #IE #XHTML #HTML #ViewUI

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了offset系列属性，包括offsetParent、offsetLeft/Top、offsetWidth/Height的含义及用法，并通过实例展示了如何利用这些属性获取元素的位置和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习 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，见一下代码：

　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是比较理想的方法。

functiongetStyle(elem,type){ 　　vartypeface=''; 　　if(elem.currentStyle) 　　　　 typeface=elem.currentStyle[type]; 　　elseif(window.getComputedStyle) 　　　　typeface=window.getComputedStyle(elem,null)[type]; 　　 returntypeface;　　　　 }

　　获得一个元素位置的可移植的方法：在窗口中的位置

functiongetX(elem){ 　　varx=0; 　　while(elem){ 　　　　x=x+elem.offsetLeft; 　　　　 elem=elem.offsetParent; 　　} 　　returnx; } functiongetY(elem){ 　　vary=0; 　　while(elem){ 　　　　y=y+elem.offsetTop; 　　　　 elem=elem.offsetParent; 　　} 　　returny; }