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 相关文章推荐
写JQuery插件的基本知识
Nov 25 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
搞定immutable.js详细说明
May 02 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
vue中的数据绑定原理的实现
Jul 02 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP连接MongoDB示例代码
2012/09/06 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python def 定义函数,调用函数方式
2020/06/02 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python mock测试的示例
2020/10/19 Python
python处理写入数据代码讲解
2020/10/22 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
一套Java笔试题
2016/08/20 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
称象教学反思
2014/02/03 职场文书
员工考核评语大全
2014/04/26 职场文书
服务承诺书怎么写
2014/05/24 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
健康状况证明书
2014/11/26 职场文书
电影建国大业观后感
2015/06/01 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
python中的sys模块和os模块
2022/03/20 Python