如何获取网页高度、屏幕高度、滚动高度？

有时候需要取页面的底部，就会用到 document.body.clientHeight，在HTML标准中这一句就能取到整个页面的高度，不论 body 的实际内容到底有多高。
在XHTML中，如果body 体中只有一行，则 document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度，就要用 document.documentElement.clientHeight 来获取。

原因：在HTML中，body 是整个DOM 的根，而在XHTML中，document 才是根，body 不再是根，所以取 body 的属性时，不能再取到整个页面的值。

区别新旧标准的行是：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

前者指明该页面使用旧标准，后者指明该页面使用新标准。加上W3C以后：
IE：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

FireFox：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Opera：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准：
IE：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

另：
这里再提供些获取各种高度的代码，条件都是在XHTML中。

var clienth = document.documentElement.clientHeight; //屏幕高度
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滚动条滚动高度
var allHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + “px”; //整个页面高度

转载于：https://www.cnblogs.com/andybruse/archive/2012/09/15/2701975.html

如何获取网页高度、屏幕高度、滚动高度？相关推荐

原生js获取和设置页面垂直滚动高度
最近想用原生js实现一些交互效果,以下代码是返回顶部按钮要用到的一个方法:获取和设置页面垂直滚动高度,如果用jq可以简单实现,用原生js,其实就是要多考虑浏览器的兼容性: /*** 获取&&a ...
js获取网页文档的各种高度和宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetW ...
html 页面自动滚动,打开网页后屏幕自动滚动代码
双击页面自动滚动代码一: 以下代码直接放在你的网页中间就可以了 //双击鼠标滚动屏幕的代码 var currentpos,timer; function initialize() { timer=s ...
怎么获取网页高度、屏幕高度、滚动高度？
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高. 在XHTML中, ...
html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...
偶然看到这个页面浏览量显示的东东,很有意思,自己做了一个. 代码如下:html> 页面浏览量顶部横条显示 $(function(){ $(window).scroll(function() { ...
js获取网页高度(详细整理)
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offs ...
js获取网页的各种高度
原文:js获取网页的各种高度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docum ...
网页设计尺寸 html5,网页设计一般至少设置多少高度？制作网站时网页的尺寸是多少？网页的屏幕尺寸是多少？...
网页设计一般至少设置多少高度?制作网站时,网页的尺寸是多少?可以让各种用户看到.网页的屏幕尺寸是多少?下面就和小编一起来看看吧! 网页设计一般至少设置多少高度? 大致高度如下:WindowXP的靠前个 ...
获取当前可视屏幕高度
em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位.一般浏览器字体大小默认为16px,则2em == 32px: ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem ...

如何获取网页高度、屏幕高度、滚动高度？

如何获取网页高度、屏幕高度、滚动高度？相关推荐

最新文章

热门文章