IE中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
FireFox中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
Opera中：
documentbodyclientWidth ==> 可见区域宽度
documentbodyclientHeight ==> 可见区域高度
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
没有定义W3C的标准，则
IE为：
documentdocumentElementclientWidth ==> 0
documentdocumentElementclientHeight ==> 0
FireFox为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
示例：
var winWidth = 0;var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (windowinnerWidth)
winWidth = windowinnerWidth;
else if ((documentbody) && (documentbodyclientWidth))
winWidth = documentbodyclientWidth;
//获取窗口高度
if (windowinnerHeight)
winHeight = windowinnerHeight;
else if ((documentbody) && (documentbodyclientHeight))
winHeight = documentbodyclientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth)
{
winHeight = documentdocumentElementclientHeight;
winWidth = documentdocumentElementclientWidth;
}
//结果输出至两个文本框
documentform1availHeightvalue= winHeight;
documentform1availWidthvalue= winWidth;
}
findDimensions();
//调用函数，获取数值
windowonresize=findDimensions;
浏览器默认的样式就是这样的，默认情况下<body>的宽度就比<html>小的，原因是<body>和<html>的内外边框所导致。因此我们在与CSS样式表的时候都要进行“reset”：
{
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
消除了默认的内外边框之后，<body>的宽度就与<html>相同了。
strInfo+=\r\n网页可见区域高:+documentbodyclientHeight;
strInfo+=\r\n网页可见区域宽:+documentbodyoffsetWidth+(包括边线的宽);
strInfo+=\r\n网页可见区域高:+documentbodyoffsetHeight+(包括边线的高);
strInfo+=\r\n网页正文全文宽:+documentbodyscrollWidth;
strInfo+=\r\n网页正文全文高:+documentbodyscrollHeight;
strInfo+=\r\n网页被卷去的高:+documentbodyscrollTop;
strInfo+=\r\n网页被卷去的左:+documentbodyscrollLeft;
strInfo+=\r\n网页正文部分上:+windowscreenTop;
strInfo+=\r\n网页正文部分左:+windowscreenLeft;
strInfo+=\r\n屏幕分辨率的高:+windowscreenheight;
strInfo+=\r\n屏幕分辨率的宽:+windowscreenwidth;
strInfo+=\r\n屏幕可用工作区高度:+windowscreenavailHeight;
strInfo+=\r\n屏幕可用工作区宽度:+windowscreenavailWidth;
windowconfirm(strInfo);
</script
-----------------------------------------------------------------------------------------
最近编程中发现html静态页面的开发可以使用
documentbodyClientHeight
来获得页面的高度，但aspnet的页面却无法这样获取，获取到的只是页面最小的高度，比如页面只有一个button，那么该js语句获得的就是24。
documentdocumentElementOffsetHeight
----------------------------------------------------------------------------------------加上documentbodyscrollLeft;
documentbodyscrollTop;
x=documentbodyclientWidth+documentbodyscrollLeft;
y=documentbodyclientHeight+documentbodyscrollTop;若想得到整个页面的高度可以用
jquery
$(function(){
/调整窗口自动调整宽度/
$(window)resize(function(){
var h = $(window)height();
var w = $(window)width();
consoleinfo("窗口高度：" + h + "; 窗口宽度：" + w);
});
});
<!DOCTYPE html>
<html>
<head>
<meta >
大概是窗口还没达到你要的高度就获取了，获取显示区域尺寸可以用 clientHeight clientWidth
获取内容尺寸可以用 scrollHeight scrollWidth
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
以上就是关于如何用JS动态获取浏览器的宽高全部的内容，包括:如何用JS动态获取浏览器的宽高、body的宽度默认是多少、javascript如何获取页面的高度和宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）