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学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js 操作符汇总
Nov 08 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python中的Django基本命令实例详解
2018/07/15 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Java面向对象面试题
2016/12/26 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
决心书范文
2014/03/11 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
写给老婆的保证书
2015/02/27 职场文书
学校教学工作总结2015
2015/05/19 职场文书
车间班组长竞聘书
2015/09/15 职场文书
导游词之山西关帝庙
2019/11/01 职场文书