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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
JavaScript实现alert弹框效果
Nov 19 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php绘制圆形的方法
2015/01/24 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
AngularJS 教程及实例代码
2017/10/23 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python基础语言学习笔记总结(精华)
2017/11/14 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python hough变换检测直线的实现方法
2019/07/12 Python
解决Django中多条件查询的问题
2019/07/18 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
房产代理公证处委托书
2014/04/04 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书