收藏

如何用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 marginalert($(window).width()); //浏览器时下窗口可视区域宽度alert($(document).width());//浏览器时下窗口文档对于象宽度alert($(document.body).width());//浏览器时下窗口文档body的高度alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding marginalert($(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中获取窗口高度的方法