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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
详解React 元素渲染
2020/07/07 Javascript
python字符串替换的2种方法
2014/11/30 Python
python让列表倒序输出的实例
2018/06/25 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
css3 transform属性详解
2014/09/30 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
优秀教师的感人事迹
2014/02/04 职场文书
项目建议书格式
2014/03/12 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
安全教育培训制度
2015/08/06 职场文书
《少年闰土》教学反思
2016/02/18 职场文书