使用js / jquery获取浏览器滚动条的高度和宽度的详细用法

获取浏览器窗口可见区域的高度和宽度. 需要滚动条高度的朋友可以参考它.

在IE中，只能按以下方式获得浏览器显示窗口的大小: 该代码如下复制代码

document.body.offsetWidth 
document.body.offsetHeight

在声明DOCTYPE的浏览器中，可以使用它来获取浏览器显示窗口的大小: 代码如下复制代码

document.documentElement.clientWidth 
document.documentElement.clientHeight

IEjquery 滚动条宽度，FF和Safari均支持此方法. 尽管Opera支持此属性，但它会返回页面大小；

同时jquery 滚动条宽度，除IE之外的所有浏览器都将此信息保存在window对象中，可以通过以下方式获得该信息: 代码如下: 复制代码

window.innerWidth 
window.innerHeight

获取整个网页大小的一般方法如下. 复制代码

document.body.scrollWidth 
document.body.scrollHeight

获得屏幕分辨率高度的一般方法如下. 复制代码

window.screen.height 
window.screen.width

示例摘要

function getViewSizeWithoutScrollbar(){//不包含滚动条 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滚动条 
if(window.innerWidth){ 
return { 
width : window.innerWidth, 
height: window.innerHeight 
} 
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
return { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
}

附加了获取整个页面宽度和高度的最常用方法（需要jquery框架）

$(document).width() < $(body).width() ? $(document).width() : $(body).width(); 
$(document).height() < $(body).height() ? $(document).height() : $(body).height();

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

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-289461-1.html