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 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
页面点击小红心js实现代码
May 26 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery常用操作小结
2014/07/21 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python类定义的讲解
2013/11/01 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python import 上级目录的导入
2020/11/03 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
原料仓管员岗位职责
2014/04/12 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
师德师风的心得体会
2014/09/02 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
小学优秀学生评语
2014/12/29 职场文书
教导主任个人总结
2015/03/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
Python源码解析之List
2021/05/21 Python
为Centos安装指定版本的Docker
2022/04/01 Servers
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL