天天看點

js擷取對象位置的方法

scrollHeight: ?峰??瀵矽薄??婊??ㄩ??搴???

scrollLeft:璁劇疆???峰??浣?浜?瀵矽薄宸?竟????绐??d腑??????瑙???瀹圭????宸???涔??寸??璺?绂?
scrollTop:璁劇疆???峰??浣?浜?瀵矽薄??椤剁????绐??d腑??瑙???瀹圭????椤剁??涔??寸??璺?绂?
scrollWidth:?峰??瀵矽薄??婊??ㄥ?藉害

offsetHeight:?峰??瀵矽薄?稿?逛????㈡???辯?跺???? offsetParent 灞??ф??瀹????跺??????楂?搴?
offsetLeft:?峰??瀵矽薄?稿?逛????㈡????offsetParent 灞??ф??瀹????跺??????璁$??宸?晶浣?缃?

offsetTop:?峰??瀵矽薄?稿?逛????㈡????offsetTop 灞??ф??瀹????跺??????璁$??椤剁??浣?缃?

event.clientX ?稿?規??妗g??姘村鈎搴ф??

event.clientY ?稿?規??妗g?????村駭??

event.offsetX ?稿?瑰?瑰?ㄧ??姘村鈎????

event.offsetY ?稿?瑰?瑰?ㄧ?????村????

document.documentElement.scrollTop ???存?瑰??婊??ㄧ????
event.clientX+document.documentElement.scrollTop ?稿?規??妗g??姘村鈎搴ф??+???存?瑰??婊??ㄧ????

????浠ヤ?涓昏???IE涔?涓?锛?FireFox宸?寮?濡?涓?锛?

IE6.0??FF1.06+锛?

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5锛?

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height      
<!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" lang="gb2312">

<head>

<head>

<title> 浠g??瀹?渚?锛??充?clientWidth??offsetWidth??clientHeight??offsetHeight??娴?璇?姣?杈? </title>

<meta http-equiv="content-type" content="text/html; charset=gb2312" />

<meta name="author" content="??宀[email protected]">

<meta name="copyright" content="http://www.cnlei.com" />

<meta name="description" content="?充?clientWidth??offsetWidth??clientHeight??offsetHeight??娴?璇?姣?杈?" />

<style type="text/css" media="all">

body {font-size:14px;}

a,a:visited {color:#00f;}

#Div_CnLei {

width:300px;

height:200px;

padding:10px;

border:10px solid #ccc;

background:#eee;

font-size:12px;

}

#Div_CnLei p {margin:0;padding:10px;background:#fff;}

</style>

<script type="text/javascript">

function Obj(s){

return document.getElementByIdx(s)?document.getElementByIdx(s):s;

}

function GetClientWidth(o){

return Obj(o).clientWidth;

}

function GetClientHeight(o){

return Obj(o).clientHeight;

}

function GetOffsetWidth(o){

return Obj(o).offsetWidth;

}

function GetOffsetHeight(o){

return Obj(o).offsetHeight;

}

</script>

</head>

<body>

<p>?瑰?諱??㈢???炬??</p>

<div id="Div_CnLei">

<p><a href=http://bbs.chinaunix.net/"javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a> <a href=http://bbs.chinaunix.net/"javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>

<p><a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a> <a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>

</div>

<div id="Description">

<p><strong>IE6.0??FF1.06+锛?</strong><br />

clientWidth = width + padding = 300+10?2 = 320<br />

clientHeight = height + padding = 200+10?2 = 220<br />

offsetWidth = width + padding + border = 300+10?2+10?2= 340<br />

offsetHeight = height + padding + border = 200+10?2+10?2 = 240</p>

<p><strong>IE5.0/5.5锛?</strong><br />

clientWidth = width - border = 300-10?2 = 280<br />

clientHeight = height - border = 200-10?2 = 180<br />

offsetWidth = width = 300<br />

offsetHeight = height = 200</p>

</div>

</body>

</html>      

繼續閱讀