IE涓?锛??
document.body.clientWidth?==>?*DY瀵硅薄瀹藉害
document.body.clientHeight?==>?*DY瀵硅薄楂?搴?
document.documentElement.clientWidth?==>???瑙??哄??瀹藉害
document.documentElement.clientHeight?==>???瑙??哄??楂?搴?
FireFox涓?锛??
document.body.clientWidth?==>?*DY瀵硅薄瀹藉害
document.body.clientHeight?==>?*DY瀵硅薄楂?搴?
document.documentElement.clientWidth?==>???瑙??哄??瀹藉害
document.documentElement.clientHeight?==>???瑙??哄??楂?搴?
Opera涓?锛??
document.body.clientWidth ==> ??瑙??哄??瀹藉害
document.body.clientHeight ==> ??瑙??哄??楂?搴?
document.documentElement.clientWidth ==> 椤甸?㈠?硅薄瀹藉害锛???DY瀵硅薄瀹藉害??涓?Margin瀹斤?
document.documentElement.clientHeight ==> 椤甸?㈠?硅薄楂?搴????DY瀵硅薄楂?搴???涓?Margin楂?锛?
?
娌℃??瀹?涔?W3C??????锛???
IE涓猴??
document.documentElement.clientWidth?==>?0
document.documentElement.clientHeight?==>?0
FireFox涓猴?
document.documentElement.clientWidth?==>?椤甸?㈠?硅薄瀹藉害锛???DY瀵硅薄瀹藉害??涓?Margin瀹?
document.documentElement.clientHeight?==>?椤甸?㈠?硅薄楂?搴????DY瀵硅薄楂?搴???涓?Margin楂?锛?
Opera涓猴??
document.documentElement.clientWidth ==> 椤甸?㈠?硅薄瀹藉害锛???DY瀵硅薄瀹藉害??涓?Margin瀹斤?
document.documentElement.clientHeight ==> 椤甸?㈠?硅薄楂?搴????DY瀵硅薄楂?搴???涓?Margin楂?锛?
?
缃?椤靛??瑙??哄??瀹斤? document.body.clientWidth
缃?椤靛??瑙??哄??楂?锛? document.body.clientHeight
缃?椤靛??瑙??哄??瀹斤? document.body.offsetWidth (????杈圭嚎??瀹?
缃?椤靛??瑙??哄??楂?锛? document.body.offsetHeight (????杈圭嚎??楂?)
缃?椤垫?ｆ???ㄦ??瀹斤? document.body.scrollWidth
缃?椤垫?ｆ???ㄦ??楂?锛? document.body.scrollHeight
缃?椤佃??峰?荤??楂?锛? document.body.scrollTop
缃?椤佃??峰?荤??宸?? document.body.scrollLeft
缃?椤垫?ｆ???ㄥ??涓?锛? window.screenTop
缃?椤垫?ｆ???ㄥ??宸?? window.screenLeft
灞?骞???杈ㄧ????楂?锛? window.screen.height
灞?骞???杈ㄧ????瀹斤? window.screen.width
灞?骞????ㄥ伐浣??洪??搴?? window.screen.availHeight
灞?骞????ㄥ伐浣??哄?藉害锛? window.screen.availWidth
?
HTML绮剧‘瀹?浣?锛?scrollLeft??scrollWidth??clientWidth??offsetWidth
scrollWidth?==>??峰??瀵硅薄??婊??ㄥ?藉害
scrollHeight?==>? ?峰??瀵硅薄??婊??ㄩ??搴?
scrollLeft?==>?璁剧疆???峰??浣?浜?瀵硅薄宸?竟????绐??ｄ腑??????瑙???瀹圭????宸???涔??寸??璺?绂伙?琚??峰?荤??宸??
scrollTop?==>?璁剧疆???峰??浣?浜?瀵硅薄??椤剁????绐??ｄ腑??瑙???瀹圭????椤剁??涔??寸??璺?绂伙?琚??峰?荤??楂?锛?
offsetLeft?==>??峰??瀵硅薄?稿?逛????㈡????offsetParent 灞??ф??瀹????跺??????璁＄??宸?晶浣?缃?
offsetTop?==>??峰??瀵硅薄?稿?逛????㈡????offsetTop 灞??ф??瀹????跺??????璁＄??椤剁??浣?缃?
offsetHeight?==>??峰??瀵硅薄?稿?逛????㈡???辩?跺???? offsetParent 灞??ф??瀹????跺??????楂?搴?
event.clientX?==>??稿?规??妗ｇ??姘村钩搴ф??
event.clientY?==>??稿?规??妗ｇ?????村骇??
event.offsetX?==>??稿?瑰?瑰?ㄧ??姘村钩????
event.offsetY?==>??稿?瑰?瑰?ㄧ?????村????
document.documentElement.scrollTop?==>????存?瑰??婊??ㄧ????
event.clientX+document.documentElement.scrollTop?==>??稿?规??妗ｇ??姘村钩搴ф??+???存?瑰??婊??ㄧ????
?
瀹??颁唬??锛?
<!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">
<head>
<title>璇疯??存?瑙??ㄧ????lt;/title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">璇疯??存?瑙??ㄧ???ｅぇ灏?</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--?剧ず娴?瑙??ㄧ???ｇ??瀹???灏哄??->
娴?瑙??ㄧ?????? 瀹???楂?搴? <input type="text" name="availHeight" size="4"/><br />
娴?瑙??ㄧ?????? 瀹???瀹藉害: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
//?芥?帮??峰??灏哄??function findDimensions() {
//?峰??绐??ｅ?藉害
if (window.innerWidth) {
winWidth = window.innerWidth;
} else if ((document.body) && (document.body.cli
![JS中几种获取对象宽度和高度的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)