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 建立对象的方法
Apr 21 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
JavaScript手风琴页面制作
May 17 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
node内置调试方法总结
Feb 22 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
django的登录注册系统的示例代码
2018/05/14 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python实现视频读取和转化图片
2019/12/10 Python
Python enumerate内置库用法解析
2020/02/24 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
搞笑车尾标语
2014/06/23 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
2014离婚协议书范文
2014/09/10 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
mysql全面解析json/数组
2022/07/07 MySQL