文档类型声明对document.body.clientHeight的取值影响

最新推荐文章于 2024-03-22 14:25:18 发布

mengyuying16

最新推荐文章于 2024-03-22 14:25:18 发布

阅读量665

点赞数

分类专栏： HTML JavaScript 文章标签：页面高度 clientHeight

本文链接：https://blog.csdn.net/mengyuying16/article/details/77717186

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

有时候我们想要获取浏览器可视窗口（页面）的宽度和高度，会使用

document.body.clientWidth
document.body.clinetHeight

但是，会发现在html文档头部的那个文档类型声明，会对document.body.clinetHeight发生区别。

1、不做任何文档类型声明时候，可以获取到页面的高度.（1366 662 是我电脑浏览器页面的宽度和高度）。

<html>
<head>
	<title>第一行文档类型声明对clientHeight的影响</title>
</head>
<body>
<div>3333</div>
<script type="text/javascript">
	var w = document.body.clientWidth;
	var h = document.body.clientHeight;
	alert("body标签方式：\n"+"当前可视窗口宽度："+w+"\n当前可视窗口高度："+h);//1366 662	
</script>
</body>
</html>

2、文档声明使用<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >，也可以获取到页面的高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
	<title>第一行文档类型声明对clientHeight的影响</title>
</head>
<body>
<div>3333</div>
<script type="text/javascript">
	var w = document.body.clientWidth;
	var h = document.body.clientHeight;
	alert("body标签方式：\n"+"当前可视窗口宽度："+w+"\n当前可视窗口高度："+h);//1350 662


</script>
</body>
</html>

3、其他的常见文档声明，都不能通过document.body.clientHeight获取到页面高度，body标签对应的高度一般是页面上填充内容撑开的高度。比如，例子代码中只有一个<div>333</div>,对应的body标签高度是21。

以下常用的 DOCTYPE 声明，都不能通过document.body.clientHeight获取到页面高度。

HTML 5方式

<!DOCTYPE html>

HTML 4.01方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

解决方案：
采用document.documentElement.clientHeight来替代document.body.clientHeight.

<!DOCTYPE html>
<html>
<head>
	<title>第一行文档类型声明对clientHeight的影响</title>
</head>
<body>
<div>3333</div>
<script type="text/javascript">

	var w = document.documentElement.clientWidth;
	var h = document.documentElement.clientHeight;
	alert("html标签方式：\n"+"当前可视窗口宽度："+w+"\n当前可

视窗口高度："+h);//1366 662

</script>
</body>
</html>

因为现有的DOM中，<html></html>才是根节点（也就是document才是根），而不再是body了。

所以想要获取整个页面的值，要用document.documentElement。
建议不管是哪一种文档类型声明，都采用document.documentElement.clientHeight来获取整个页面的值。

mengyuying16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档类型声明对document.body.clientHeight的取值影响

有时候我们想要获取浏览器可视窗口（页面）的宽度和高度，会使用document.body.clientWidthdocument.body.clinetHeight但是，会发现在html文档头部的那个文档类型声明，会对document.body.clinetHeight发生区别。1、不做任何文档类型声明时候，可以获取到页面的高度.（1366 662 是我电脑浏览器页面的宽度和高度）
复制链接

扫一扫