scrollHeight scrollWidth clientHeight clientWidth

最新推荐文章于 2024-07-23 17:01:19 发布

hejianhuacn

最新推荐文章于 2024-07-23 17:01:19 发布

阅读量124

点赞数

文章标签： Chrome IE 浏览器 Firefox JavaScript ViewUI

很多时候需要获得当前浏览器窗口大小，以获得好的页面布局，查查帮助无非就是：

document.body.scrollHeight 
document.body.scrollWidth 
document.body.clientHeight 
document.body.clientWidth
document.documentElement.scrollHeight
document.documentElement.scrollWidth
document.documentElement.clientHeight
document.documentElement.clientWidth

在使用上面的方法时必须得注意，文档是否定义了DOCTYPE，检测是否定义DOCTYPE使用：

document.compatMode

其返回两种类型：BackCompat，CSS1Compat , 当文档类型定义了DOCTYPE时返回CSS1Compat

文档定义了DOCTYPE时使用：

document.documentElement.scrollHeight 
document.documentElement.scrollWidth 
document.documentElement.clientHeight 
document.documentElement.clientWidth

否则使用：

document.body.scrollHeight 
document.body.scrollWidth
document.body.clientHeight 
document.body.clientWidth

但是，问题远没有这么简单，看看这个简单的页面的效果：

<!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=UTF-8"> 
		<title>scrollHeight,clientHeight,scrollWidth,clientWidth</title> 
		<script type="text/javascript" language="javascript"> 
			function but_click1() 
			{ 
				alert((document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight); 
			} 
			function but_click2() 
			{ 
				alert((document.compatMode != "CSS1Compat") ? document.body.clientHeight : document.documentElement.clientHeight); 
			} 
			function but_click3() 
			{ 
				alert((document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth); 
			} 
			function but_click4() 
			{ 
				alert((document.compatMode != "CSS1Compat") ? document.body.clientWidth : document.documentElement.clientWidth); 
			} 
		</script> 
	</head> 
	<body style="margin:0;overflow-x:hidden;overflow-y:hidden"> 
		<input type="button" height=40px οnclick="but_click2()" value="clientHight" > 
		<br> 
		<input type="button" height=40px οnclick="but_click4()" value="clientWidth" > 
		<br> 
		<input type="button" height=40px οnclick="but_click1()" value="scrollHeight" > 
		<br> 
		<input type="button" height=40px οnclick="but_click3()" value="scrollWidth" > 
	</body> 
</html>

这个页面使用不同的浏览器打开，在ie7下无论是否定义DOCTYPE，scrollHeight获得的值都不会变化；同样FF也没有影响；只有对chrome有影响。当你实际运行上面的代码时，你还会发现3种浏览器中获得的值居然也不同！

    结果大致是这样:
         scrollHeight
         有文档类型定义
             在chrome 返回的是页面控件高度的和
             在ie下   返回的是页面控件高度的和
             在firefox 下返回整个窗口高度
         scrollHeight
         没有文档类型定义
             在chrome 返回整个窗口实际高度
             在ie     返回的是页面控件高度的和
             在firefox下返回整个窗口高度

scrollWidth 在有无DOCTYPE还是在不同浏览器上结果基本一致，IE偏小，不知道是不是右侧的scrollbar影响了结果，我猜的^_^

也就是说无论在有无DOCTYPE定义的页面，在ie下用scrollHeight获得不了窗口高度,这时候就需要使用clientHeight来获得窗口高度！clientHeight效果基本一致。

反正我也说不明白那个浏览器更遵守规范，它们只会让你头疼。现在终于明白了为什么每次需求讨论都会头疼呢，写浏览器的大牛们对规范理解还有这么大偏差，何况同样的事由不同的人去描述，更何况里面还有鸟人呢！