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 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js漂浮广告实现代码
Aug 15 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
微信小程序实现简单跑马灯效果
May 26 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
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
canvas学习之API整理笔记(一)
2016/12/29 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
Linux Centos7.2下安装nodejs&npm配置全局路径的教程
2018/05/15 NodeJs
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
pandas.cut具体使用总结
2019/06/24 Python
python异常处理try except过程解析
2020/02/03 Python
Python文件操作方法详解
2020/02/09 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
Shell如何接收变量输入
2012/09/24 面试题
JPA的特点
2014/10/25 面试题
中国梦演讲稿范文
2014/08/28 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
关于 Python json中load和loads区别
2021/11/07 Python