收藏
如何用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中获取窗口高度的方法