JS DOM对象 网页内容尺寸scrollHeight scrollHeight和scrollWidth,获取网页内容高度和宽度。

网页尺寸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 h0 = document.documentElement.clientHeight||document.body.clientHeight;
    var w0 = document.documentElement.clientWidth||document.body.clietnWidth;
    var w = document.documentElement.scrollWidth||document.body.scrollWidth;
    var h = document.documentElement.scrollHeight||document.body.scrollHeight;
    document.write("当前浏览器实际内容宽:"+w+"<br>"+"当前浏览器实际内容高:"+h+"<br>");
    document.write("当前浏览器视窗宽:"+w0+"<br>"+"当前浏览器视窗高:"+h0);
   
</script>
</body>    
</html>



你可能感兴趣的:(JavaScript,dom,对象,web前端)