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)
Feb 05 Javascript
Firefox div高度自适应
Apr 28 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript 解析url的search方法
Feb 09 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
编程语言JavaScript简介
Oct 16 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
基于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
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
vue快捷键与基础指令详解
2017/06/01 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
python图像常规操作
2017/11/11 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
中学生评语大全
2014/04/18 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
精神病医院见习报告
2014/11/03 职场文书
离婚案件上诉状
2015/05/23 职场文书
导游词之无锡梅园
2019/11/28 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS