如何获取页面可视区域的高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取页面可视区域的高度相关的知识，希望对你有一定的参考价值。
参考技术A function getWH()var wh = ;
"Height Width".replace(/[^\s]+/g,function(a)
var b = a.toLowerCase();
wh[b]=window["inner".concat(a)]||
document.compatMode ==="CSS1Compat" && document.documentElement["client".concat(a)]
|| document.body["client".concat(a)];
);
return wh;
了解两个名词：BackCompat 标准兼容模式关闭（怪异模式）
CSS1Compat 标准兼容模式开启
这个方法为获取页面可视区域的高度，普通情况下，window.innerHeight 即可获取，如果是正常模式，并且有clientHeight的情况下， document.documentElement.clientHeight 获取的就是可视区域高度。在怪异模式下，是使用document.body获取。
function getBodyWH()
var wh = ;
"Height Width".replace(/[^\s]+/g,function(a)
var b = a.toLowerCase();
wh[b]=document.compatMode ==="CSS1Compat" && document.documentElement["scroll".concat(a)]
|| document.body["scroll".concat(a)];
);
return wh;
这个为获取页面的高度，用于iframe的自适应时候获取。
var ss = ;
ss.scrollTopFn = function(arg)
var a = navigator.userAgent.toLowerCase().indexof("webkit");//判断webkit内核
var scrollTop;
if(a>-1||document.compatMode =="BackCompat")
this.scrollTopFn =function(arg)
if(typeof arg == 'number')
document.body.scrollTop = arg;
else
return document.body.scrollTop;
else
this.scrollTopFn =function(arg)
if(typeof arg == 'number')
document.documentElement.scrollTop = arg;
else
return document.documentElement.scrollTop;
return this.scrollTopFn.apply(this,arguments);
参考技术B 您好，我来为您解答：
window.document.body.clientHeight就可以
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
转载，仅供参考。
如果我的回答没能帮助您，请继续追问。本回答被提问者和网友采纳
jQuery 获取页面元素的属性值
获取浏览器显示区域（可视区域）的高度 ：
$(window).height();
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 ：
$(document).width();
浏览器当前窗口文档body的高度：
$(document.body).height();
浏览器当前窗口文档body的宽度：
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft();
获取或设置元素的宽度：
$(obj).width();
获取或设置元素的高度：
$(obj).height();
某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）
- scrollTop(), scrollLeft()
- 设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说，就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性
以上是关于如何获取页面可视区域的高度的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中获取文档的高度可视区域高度以及滚动条距页面顶部的高度