JS获取当前网页大小以及屏幕分辨率等

这篇文章主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单，但比较实用，需要的朋友可以参考下

效果如下：

代码如下：

获取当前对象大小以及屏幕分辨率等

" width:88%;margin:30px auto; color:blue;" id= "div_html" >

<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number8 index7 alt1"> <code class="js keyword">var</code> <code class="js plain">s = </code> <code class="js string">""</code> <code class="js plain">; </code> </div> <div class="line number9 index8 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页可见区域宽："</code> <code class="js plain">+ document.body.clientWidth+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number10 index9 alt1"> <code class="js plain">s += </code> <code class="js string">" 网页可见区域高："</code> <code class="js plain">+ document.body.clientHeight+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number11 index10 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页可见区域宽："</code> <code class="js plain">+ document.body.offsetWidth + </code> <code class="js string">" (包括边线和滚动条的宽)"</code> <code class="js plain">+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number12 index11 alt1"> <code class="js plain">s += </code> <code class="js string">" 网页可见区域高："</code> <code class="js plain">+ document.body.offsetHeight + </code> <code class="js string">" (包括边线的宽)"</code> <code class="js plain">+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number13 index12 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页正文全文宽："</code> <code class="js plain">+ document.body.scrollWidth+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number14 index13 alt1"> <code class="js plain">s += </code> <code class="js string">" 网页正文全文高："</code> <code class="js plain">+ document.body.scrollHeight+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number15 index14 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页被卷去的高(ff)："</code> <code class="js plain">+ document.body.scrollTop+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number16 index15 alt1"> <code class="js plain">s += </code> <code class="js string">" 网页被卷去的高(ie)："</code> <code class="js plain">+ document.documentElement.scrollTop+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number17 index16 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页被卷去的左："</code> <code class="js plain">+ document.body.scrollLeft+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number18 index17 alt1"> <code class="js plain">s += </code> <code class="js string">" 网页正文部分上："</code> <code class="js plain">+ window.screenTop+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number19 index18 alt2"> <code class="js plain">s += </code> <code class="js string">" 网页正文部分左："</code> <code class="js plain">+ window.screenLeft+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number20 index19 alt1"> <code class="js plain">s += </code> <code class="js string">" 屏幕分辨率的高："</code> <code class="js plain">+ window.screen.height+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number21 index20 alt2"> <code class="js plain">s += </code> <code class="js string">" 屏幕分辨率的宽："</code> <code class="js plain">+ window.screen.width+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number22 index21 alt1"> <code class="js plain">s += </code> <code class="js string">" 屏幕可用工作区高度："</code> <code class="js plain">+ window.screen.availHeight+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number23 index22 alt2"> <code class="js plain">s += </code> <code class="js string">" 屏幕可用工作区宽度："</code> <code class="js plain">+ window.screen.availWidth+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number24 index23 alt1"> <code class="js plain">s += </code> <code class="js string">" 你的屏幕设置是 "</code> <code class="js plain">+ window.screen.colorDepth +</code> <code class="js string">" 位彩色"</code> <code class="js plain">+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number25 index24 alt2"> <code class="js plain">s += </code> <code class="js string">" 你的屏幕设置 "</code> <code class="js plain">+ window.screen.deviceXDPI +</code> <code class="js string">" 像素/英寸"</code> <code class="js plain">+</code> <code class="js string">"<br />"</code> <code class="js plain">; </code> </div> <div class="line number26 index25 alt1">   </div> <div class="line number27 index26 alt2"> <code class="js plain">document.getElementById(</code> <code class="js string">"div_html"</code> <code class="js plain">).innerHTML = s;</code> </div> <div class="line number28 index27 alt1"> <code class="js plain">

代码说明图如下：

转载于:https://blog.51cto.com/10985329/1787966