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


Posted in Javascript onSeptember 05, 2014

效果如下:
JS获取当前网页大小以及屏幕分辨率等

代码如下:

<html>
<head>
<title>获取当前对象大小以及屏幕分辨率等</title>
<body>
<div style=" width:88%;margin:30px auto; color:blue;" id="div_html">
</div>
<script type="text/javascript">
var s = ""; 
s += " 网页可见区域宽:"+ document.body.clientWidth+"<br />"; 
s += " 网页可见区域高:"+ document.body.clientHeight+"<br />"; 
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />"; 
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"+"<br />"; 
s += " 网页正文全文宽:"+ document.body.scrollWidth+"<br />"; 
s += " 网页正文全文高:"+ document.body.scrollHeight+"<br />"; 
s += " 网页被卷去的高(ff):"+ document.body.scrollTop+"<br />"; 
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop+"<br />"; 
s += " 网页被卷去的左:"+ document.body.scrollLeft+"<br />"; 
s += " 网页正文部分上:"+ window.screenTop+"<br />"; 
s += " 网页正文部分左:"+ window.screenLeft+"<br />"; 
s += " 屏幕分辨率的高:"+ window.screen.height+"<br />"; 
s += " 屏幕分辨率的宽:"+ window.screen.width+"<br />"; 
s += " 屏幕可用工作区高度:"+ window.screen.availHeight+"<br />"; 
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth+"<br />"; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"<br />"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"<br />"; 

document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>

代码说明图如下:

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

Javascript 相关文章推荐
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
You might like
php抓取页面的几种方法详解
2013/06/17 PHP
PHP7.0版本备注
2015/07/23 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python中super函数的用法
2017/11/17 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python学习基础之循环import及import过程
2018/04/22 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python利用tkinter实现屏保
2019/07/30 Python
Python解析json代码实例解析
2019/11/25 Python
Python enumerate内置库用法解析
2020/02/24 Python
python生成大写32位uuid代码
2020/03/03 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
邮政竞聘演讲稿
2014/09/03 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
委托证明范本
2014/11/25 职场文书
未婚证明格式
2015/06/15 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
python实现剪贴板的操作
2021/07/01 Python
Apache POI的基本使用详解
2021/11/07 Servers
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Python+tkinter实现高清图片保存
2022/03/13 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python