网页尺寸scrollHeight

56 阅读 0 评论 37 点赞

我是靠谱客的博主苹果玉米，最近开发中收集的这篇文章主要介绍网页尺寸scrollHeight，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

任务

在script标签内，补充右边编辑器代码，获取网页的实际宽度和高度

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
var w=document.documentElement.scrollWidth||document.body.scrollWidth;
var h=document.documentElement.scrollHight||document.body.scrollHeight;
document.write("宽是"+w+"高是"+h);
</script>
</body>
</html>