JS获取屏幕高度的简单实现代码


Posted in Javascript onMay 24, 2016

主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用window的属性;在ie下需 要深入document内部对body进行检测;在dom环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

window对象的innerwidth属性包含当前窗口的内部宽度。window对象的innerheight属性包含当前窗口的内部高度。

document对象的body属性对应html文档的标签。document对象的documentelement属性则表示html文档的根节点。

document.body.clientheight表示html文档所在窗口的当前高度。document.body. clientwidth表示html文档所在窗口的当前宽度。

js获取屏幕高度var s = "";

s += " 网页可见区域宽:"+ document.body.clientwidth;

s += " 网页可见区域高:"+ document.body.clientheight;

s += " 网页可见区域宽:"+ document.body.offsetwidth +" (包括边线和滚动条的宽)";

s += " 网页可见区域高:"+ document.body.offsetheight +" (包括边线的宽)";

s += " 网页正文全文宽:"+ document.body.scrollwidth;

s += " 网页正文全文高:"+ document.body.scrollheight;

s += " 网页被卷去的高:"+ document.body.scrolltop;

s += " 网页被卷去的左:"+ document.body.scrollleft;

s += " 网页正文部分上:"+ window.screentop;

s += " 网页正文部分左:"+ window.screenleft;

s += " 屏幕分辨率的高:"+ window.screen.height;

s += " 屏幕分辨率的宽:"+ window.screen.width;

s += " 屏幕可用工作区高度:"+ window.screen.availheight;

s += " 屏幕可用工作区宽度:"+ window.screen.availwidth;

s += " 你的屏幕设置是 "+ window.screen.colordepth +" 位彩色";

s += " 你的屏幕设置 "+ window.screen.devicexdpi +" 像素/英寸";

以上这篇JS获取屏幕高度的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 #Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 #Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 #Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 #Javascript
jQuery中事件与动画的总结分享
May 24 #Javascript
jQuery根据表单name获取值的方法
May 24 #Javascript
深入理解jquery自定义动画animate()
May 24 #Javascript
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
php的memcached客户端memcached
2011/06/14 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
保送生自荐信范文
2013/10/06 职场文书
中学生自我评价范文
2014/02/08 职场文书
安全承诺书格式
2014/05/21 职场文书
日语专业求职信
2014/07/04 职场文书
平安工地汇报材料
2014/08/19 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
初中毕业生自我评价
2015/03/02 职场文书
童年读书笔记
2015/06/26 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang