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>