leo列

导航

scrollWidth ,scrollHeight , clientWidth, clientHeight

页面代码是这样的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body style="height:2000px;">
<script type="text/javascript">
  var str = "";
 str+="document.body.scrollHeight:";
 str+=document.body.scrollHeight;
 str+="<br />";
  str+="document.documentElement.scrollHeight:";
 str+=document.documentElement.scrollHeight;
 str+="<br />";
 str+="document.body.clientHeight:";
 str+=document.body.clientHeight;
 str+="<br />";
 str+="document.documentElement.clientHeight:";
 str+=document.documentElement.clientHeight;
 str+="<br />";
 document.write(str);
</script>
</body>
</html>

在各个浏览器下的数值

在IE6下：

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2030
document.body.clientHeight:2000
document.documentElement.clientHeight:794

在IE7下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2030
document.body.clientHeight:2000
document.documentElement.clientHeight:926

在IE8下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:794

在IE9下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:859

在FF下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:881

在chrome下:

document.body.scrollHeight:2016
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:909

在opera下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:897

在360下:

document.body.scrollHeight:2000
document.documentElement.scrollHeight:2016
document.body.clientHeight:2000
document.documentElement.clientHeight:888

所以要取得视口大小 是   document.documentElement.clientWidth 和 document.documentElement.clientHeight

要取得文档大小是         document.body.clientWidth 和 document.body.clientHeight

posted on 2012-11-08 16:50  leo列  阅读(320)  评论(0)  编辑  收藏  举报