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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
React简单介绍
May 24 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 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
PHP5函数小全(分享)
2013/06/06 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
解析Python中while true的使用
2015/10/13 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python文件排序的方法总结
2020/09/13 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
求职者简历中的自我评价
2013/10/20 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
简历中自我评价范文
2015/03/11 职场文书
博士生专家推荐信
2015/03/25 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python