如何用JAVASCRIPT获取当前窗口的高度和宽度

收藏

如何用JAVASCRIPT获取当前窗口的高度和宽度

<SCRIPT LANGUAGE="JavaScript">
var  s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线和滚动条的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工做区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工做区宽度："+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>
复制代码

JQ获取当前窗口的高度和宽度

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
 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
复制代码

• offsetWidth 实际获取的是盒模型 (width+border + padding)

总结

• 窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth;

• 窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight;

• 窗口可视区域宽度+边线和滚动条： document.body.offsetWidth ;

• 窗口可视区域高度+边线和滚动条： document.body.offsetHeight ;

• 实际内容的宽度： document.body.scrollWidth;

• 实际内容的高度： document.body.scrollHeight;

• 滚动条下拉被卷起来的距离：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

• 滚动条侧拉被卷起来的距离：document.body.scrollLeft || document.documentElement.scrollLeft ;

• 网页正文部分上：window.screenTop;

• 网页正文部分左：window.screenLeft;

• 元素的宽度：obj.offsetWidth;

• 元素的高度：obj.offsetHeight;

• 相对于父元素的上位移：obj.offsetTop;（在元素的包含元素不含滚动条的状况下）

• 相对于父元素的左位移：obj.offsetLeft;（在元素的包含元素不含滚动条的状况下） #参考

• 得到当前窗口的宽度

• 原生js获取浏览器窗口及元素宽高经常使用方法集合

• js中获取窗口高度的方法