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高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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中的命名空间相关概念浅析
2015/01/22 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
Javascript 继承机制实例
2009/08/12 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
高三学生评语大全
2014/04/25 职场文书
专科生就业求职信
2014/06/22 职场文书
化工工艺设计求职信
2014/06/25 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
MySQL日期时间函数知识汇总
2022/03/17 MySQL