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实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js电话号码验证方法
2015/09/28 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Python自动登录QQ的实现示例
2020/08/28 Python
详解python中的异常捕获
2020/12/15 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
六一儿童节演讲稿
2014/05/23 职场文书
统计专业自荐书
2014/07/06 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
初中政治教学反思
2016/02/23 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
logback如何自定义日志存储
2021/08/30 Java/Android