天天看点

浅谈clientHeight、offsetHeight、scrollHeight的联系与区别

??绗?涓?娆″?ㄤ?涓?js涓????拌?涓?涓?灞??х???跺??锛?涔???涓???浠?浠?涔??寸???哄?????ラ??浜?寰?澶?璧???锛?涓?????浜哄?逛?杩?涓?涓?灞??х??璇存?涓?澶?涓??达?杩?瀵艰?翠???瀵瑰??浠???璁よ???村??妯$???杩???锛?????杩?涓?娈典唬???ヨ?澶у?跺?卞???㈣?ㄤ?涓?杩?涓?涓?灞??у?ㄤ???娴?瑙??ㄤ???宸???锛????讹?涔?甯???澶у?跺?ㄤ娇?ㄨ?涓?涓?灞??х???跺??瑕?????????瀹?浠??ㄤ???娴?瑙??ㄤ???涓???瑙i????

浠ヤ???瀵硅?涓?涓?灞??ф?璇???浠g??锛?浣???浠ュ??跺?扮?璇??ㄤ腑锛??跺???ㄤ?????娴?瑙??ㄤ?娴?璇???

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>娴?璇?</title>
<script type="text/javascript">

var ch=document.documentElement.clientHeight;
var cw=document.documentElement.clientWidth;
document.write("杩???clientHeight锛? "+ch);
document.write("<br><br>");
document.write("杩???clientWidth锛? "+cw);
document.write("<br><br>");
document.write("<br><br>");

var oh=document.documentElement.offsetHeight;
var ow=document.documentElement.offsetWidth;
document.write("杩???offsetHeight锛? "+oh);
document.write("<br><br>");
document.write("杩???offsetWidth锛? "+ow);
document.write("<br><br>");
document.write("<br><br>");

var sh=document.documentElement.scrollHeight;
var sw=document.documentElement.scrollWidth;
document.write("杩???scrollHeight锛? "+sh);
document.write("<br><br>");
document.write("杩???scrollWidth锛? "+sw);
</script>
</head>

<body>
</body>
</html>