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解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP学习之正则表达式
2011/04/17 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Python制作词云的方法
2018/01/03 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python中return self的用法详解
2018/07/27 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
小学新教师培训方案
2014/02/03 职场文书
如何写好自荐信
2014/04/07 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
幼儿教师个人总结
2015/02/05 职场文书
异地恋情人节寄语
2015/02/28 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
学风建设主题班会
2015/08/17 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript