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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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
MySQL数据源表结构图示
2008/06/05 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
angularjs实现猜大小功能
2017/10/23 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python raise的基本使用
2020/09/10 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
签订劳动合同通知书
2015/04/16 职场文书
同学聚会致辞集锦
2015/07/28 职场文书