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写个checkbox——类似邮箱全选功能
Mar 19 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
简单的js计算器实现
Oct 26 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
一周学会PHP(视频)Http下载
2006/12/12 PHP
学习php分页代码实例
2013/10/24 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
永不消失的title提示代码
2007/02/15 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js中this用法实例详解
2015/05/05 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python如何写try语句
2020/07/14 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
js中Object.create实例用法详解
2021/10/05 Javascript
详解SQL报错盲注
2022/07/23 SQL Server