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多选框互相内容交换的实例代码
Jul 04 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
微信小程序实现留言板
Oct 31 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
总结一些js自定义的函数
2006/08/05 Javascript
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Django实现快速分页的方法实例
2017/10/22 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python实现对变位词的判断方法
2020/04/05 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python爬虫工具例举说明
2020/11/30 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
奥巴马上海演讲稿
2014/09/10 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
运动会宣传语
2015/07/13 职场文书
寒假生活随笔
2015/08/15 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android