您的位置：首页 > 其它

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

2017-08-30 17:07 531 查看
有时候我们想要获取浏览器可视窗口（页面）的宽度和高度，会使用

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来获取整个页面的值。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  页面高度 clientHeight
相关文章推荐
新的分享
章节导航