javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
2010-09-14 13:39:49 来源：WEB开发网 闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷
闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�
婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷 闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺璇茬箲濮樸劑鍩€椤掍礁鍤柛鎾跺枎椤繐煤椤忓嫬鐎銈嗘礀閹冲酣宕滄导瀛樷拺闂侇偆鍋涢懟顖涙櫠椤斿墽纾煎璺猴功缁夎櫣鈧鍠栭…閿嬩繆濮濆矈妲烽梺绋款儐閹瑰洤螞閸愩劉妲堟繛鍡楃箲濞堟﹢姊绘担椋庝覆缂傚秮鍋撴繛瀛樼矤閸撶喖宕洪埀顒併亜閹烘垵鈧綊寮抽鍕厱閻庯綆浜烽煬顒傗偓瑙勬磻閸楀啿顕ｉ崐鐕佹Ь闂佸搫妫寸粻鎾诲蓟閵娾晜鍋嗛柛灞剧☉椤忥拷
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;
}
Tags：javascript 获得 元素
编辑录入：爽爽 [复制链接] [打 印]
中查找“javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent”更多相关内容
中查找“javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent”更多相关内容更多精彩
赞助商链接
