网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE,FireFox 差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
-------------------
技术要点
本节代码主要使用了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获取当前网页大小以及屏幕分辨率等,方法虽简单,但比较实用,需要的朋友可以参考下
23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 28、原生JavaScript IP转成整型 29、原生JavaScript整型解析为IP地址 31、原生JavaScript判断是否移动设备 32...
64、原生JavaScript获得URL中GET参数值 65、原生JavaScript实现全选通用方法 66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69...
屏幕管理器 ... 在项目一开始,我们的团队就认为 Backbone 对于这个简单的游戏来说太过分了,并且每个页面都在自己的路线上。...视口代表一个容器,它掌握显示到屏幕中的内容的大小。 去做 单一过渡法 添加更多
绑定变量以始终反映屏幕大小 绑定回调以在屏幕更改时触发 执行一次性任务,如加载数据 创建自定义规则或扩展和使用预定义集 引导程序 3 支持 内容 安装 bower install angular-screenmatch 或者从 /dist 获取缩小的...
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); 7.JS中的值类型:String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值...
响应速度:图像以JavaScript加载,分辨率取决于屏幕大小。 另外,由于图像是使用CSS变换定位的,因此当您缩小或扩展浏览器窗口时,图像会巧妙地平铺。 用户体验:预览图像时会使用较小的占位符图像,该图像会缩放...
更新:大屏幕右上角二维码增加中等大小的显示(3种大小状态,适合各种场景使用) 2017.8.6 更新:优化了一些js文件 更新:优化前台登录跳转页面的 更新:上墙消息增加了显示方式、循环播放设置、循环信息条数、放大显示...
页面域关系: ...实现效果: ...js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b
screen对象 获取屏幕的高宽(分辨率) ...获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.innerWidth //窗口中可视区域(viewpoint)
JS中的常用对象[转载]web 技术 2010-06-05 15:00:30 阅读3 评论0 字号:大中小 订阅 [removed] Window For JavaScript 熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、...
窗口大小 获取终端/控制台高度和宽度的可靠方法,因为并非在所有平台,环境和node.js版本上都以相同的方式计算或更新终端/控制台。 安装 使用安装: $ npm install --save window-size 用法 var size = require ( ...
device.js, 基于媒体查询的语义客户端设备检测 使用媒体查询进行设备检测的最佳做法CSS媒体查询是一个令人惊讶的工具,用于定制布局,这取决...然而,在许多情况下,根据屏幕大小定制CSS的能力是不够的。 你可能需要完
JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...
基于Vue.js 实现的一个简单...与屏幕宽度有关而与窗口大小无关,原因不明。 4、对于浮点数计算的精度问题,我自创了一个方法进行解决。不一定是最优解决方法。 为了不损失数据,允许显示数据长度超出显示框范围。
PhantomShot 是一个简单的 JavaScript 库,使您能够使用无头 WebKit PhantomJS 从网页中获取预定义的屏幕截图。 视口和屏幕截图 URL 在配置文件中定义。 特征 连续拍摄多张截图 定义自定义视口大小和设备像素比率 对...
示例描述:窗口大小自动化管理。 8_1.htm 按指定要求打开的窗口。 8_2.htm 控制窗口的打开和关闭。 8_3.htm 从天而降的窗口。 8_4.htm 打开慢慢变大的窗口。 8_5.htm 打开一个四面变大的窗口。 8_6....
javascript中可以通过四个属性获得元素的偏移量,offsetHeight、offsetWidth、offsetLeft、offsetTop,下面为大家解释下各属性的含义
javascript可以控制播放,加载媒体,获得当前播放项的详尽信息。 fsbuttonlink (url):如果用户的flashplayer版本高于(9.0.28)播放器会自动的显示一个全屏按钮。通过设置该值,你可以链接到另外的页面用以全屏显示...
在第一阶段中,您将采用缺乏可访问性的静态设计,并将该设计转换为可在不同大小的显示器上做出响应,并可供屏幕阅读器使用。 您还将添加服务工作人员,以开始为用户创建无缝的脱机体验的过程。规格您已获得餐厅点评...