 上传我的文档
 下载
 收藏
文库 物理 素材
 下载此文档
正在努力加载中...
Javascript获取高度（多种浏览器）
下载积分：960
内容提示：Javascript获取高度（多种浏览器）
文档格式：DOC|
浏览次数：1|
上传日期： 14:19:57|
文档星级：
该用户还上传了这些文档
Javascript获取高度（多种浏览器）
官方公共微信js获取网页高度(详细整理)
字体：[ ] 类型：转载 时间：
js获取网页高度包括(网页可见区域高，屏幕分辨率的高，屏幕可用工作区高度,js 获取浏览器高度
js 获取屏幕高度)等等，各种高度,本文详细整理了一些，需要了解的朋友可以参考下
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth
代码如下: &script& function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientW s += " 网页可见区域高："+ document.body.clientH s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollW s += " 网页正文全文高："+ document.body.scrollH s += " 网页被卷去的高(ff)："+ document.body.scrollT s += " 网页被卷去的高(ie)："+ document.documentElement.scrollT s += " 网页被卷去的左："+ document.body.scrollL s += " 网页正文部分上："+ window.screenT s += " 网页正文部分左："+ window.screenL s += " 屏幕分辨率的高："+ window.screen. s += " 屏幕分辨率的宽："+ window.screen. s += " 屏幕可用工作区高度："+ window.screen.availH s += " 屏幕可用工作区宽度："+ window.screen.availW s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; //alert (s); } getInfo(); &/script&
在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& 如果在页面中添加这行标记的话 在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高） 真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。 有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如,
的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720. 可是在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“& 前者指明该页面使用旧标准, 后者指明该页面使用新标准. 总结: XHTML中用 document.documentElement.clientHeight 代替
代码如下: document.body.clientHeight
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery获取屏幕高度和滚动条滚动高度的方法
这几天在做一个jQuery网站侧边栏随动的效果,其中需要通过jQuery获取屏幕高度，窗口高度和滚动条的滚动高度，以下是从网上收集的jQuery获取屏幕高度的代码
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
// 下面是一个获取页面的高度、宽度的函数
function getPageSize() {
var xScroll, yS
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
if (document.body.scrollHeight & document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollW
yScroll = document.body.scrollH
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetW
yScroll = document.body.offsetH
var windowWidth, windowH
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientW
windowWidth = self.innerW
windowHeight = self.innerH
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientW
windowHeight = document.documentElement.clientH
if (document.body) { // other Explorers
windowWidth = document.body.clientW
windowHeight = document.body.clientH
// for small pages with total height less then height of the viewport
if (yScroll & windowHeight) {
pageHeight = windowH
pageHeight = yS
// for small pages with total width less then width of the viewport
if (xScroll & windowWidth) {
pageWidth = xS
pageWidth = windowW
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageS
document.body.scrollT
$(document).scrollTop();//jQuery获取滚动条滚动高度
如果您喜欢本文请分享给您的好友，谢谢！如想浏览更多更好的内容，请登录：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）