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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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/03 PHP
php自定义session示例分享
2014/04/22 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
js常用函数 不错
2006/09/08 Javascript
Cookie 小记
2010/04/01 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
Angular实现form自动布局
2016/01/28 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python3实现随机数
2018/06/25 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python中upper是做什么用的
2020/07/20 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
销售文员的岗位职责
2013/11/20 职场文书
外贸专业求职信
2014/03/09 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers