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 27 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue双向绑定实现原理与方法详解
May 07 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短域名转换为实际域名函数
2011/01/17 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python 使用多属性来进行排序
2019/09/01 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
花店创业计划书范文
2014/02/07 职场文书
倡议书格式模板
2014/05/13 职场文书
2015年元旦标语大全
2014/12/09 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
九九重阳节致辞
2015/07/31 职场文书
村官2015年度工作总结
2015/10/14 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python