JS中取得的关于窗口宽高和滚动值的属性列表:(转载)

标签: js 窗口 高和 | 发表时间:2014-04-30 11:33 | 作者:langgufu
出处:http://www.iteye.com

首先,这是个痛苦的尝试。
  在工作中尝试把一个FLASH居中全屏放置,窗口RESIZE的时候和页面SCROLL的时候都要动态变化,需要取得当前窗口显示区域的WIDTH与HEIGHT,翻了翻资料脑子就一半面一半水搅匀了。类似的参数我全列出来:

window.screen.width: document.body.offsetWidth: document.documentElement.offsetWidth:
window.screen.height: document.body.offsetHeight: document.documentElement.offsetHeight:
window.screen.availWidth: document.body.scrollWidth: document.documentElement.scrollWidth:
window.screen.availHeight: document.body.scrollHeight: document.documentElement.scrollHeight:
window.scrollMaxX: document.body.scrollLeft: document.documentElement.scrollLeft:
window.scrollMaxY: document.body.scrollTop: document.documentElement.scrollTop:
window.scrollX: document.body.clientTop: document.documentElement.clientTop:
window.scrollY: document.body.clientLeft: document.documentElement.clientLeft:
window.pageXOffset: document.body.clientWidth: document.documentElement.clientWidth:
window.pageYOffset: document.body.clientHeight: document.documentElement.clientHeight:
window.screenX: document.width:  
window.screenY: document.height:  
window.innerWidth:    
window.innerHeight:    
window.screen.availTop    
window.screen.availLeft    


  而且我痛苦的发现,同一个属性,在不同的浏览器的JS取值是不一样的,甚至是无效的,就算都在IE中不同版本的值也不一样的,W3C的标准就从没被完整执行过,微软丈着本钱厚,肆意修改其定义,而且朝三暮四,同样一个事在版本升级时也搞出不同的标准来,一看开发组群就不是一个娘养的。

 


  就在同一个版本同一浏览器中,标准模式与混杂模式的定义也大不相同,比如document.documentElement.scrollWidth和document.body.scrollWidth,在混杂模式中,后者有效前者无效,在标准模式中前者有效后者无效,直接让人崩溃。无奈之下,把这个参数用JS统一列出来,一个个做实验,这才做成了一个完整的结果。如下表,当然,这只是在标准模式下,混杂模式我一般不用,也没精力去研究了。


  

  IE6 IE8 FF OPREA CHROME
window.screen.width: 屏幕宽
window.screen.height: 屏幕高
window.screen.availWidth: 窗口最大化后宽度
window.screen.availHeight: 窗口最大后的高度
window.scrollMaxX:   最大横向滚动幅度,即BODY加左MARGIN减去窗口显示区不含滚动棒的宽度后的值  
window.scrollMaxY: 最大纵向滚动幅度,即BODY加上下MARGIN减去窗口显示区不含滚动棒的高度后的值
window.scrollX: 左滚动值
window.scrollY: 上滚动值
window.pageXOffset: 左滚动值
window.pageYOffset: 上滚动值
window.screenX: 窗口左上角离屏幕左上角横向距离 标准模式下均为0. 窗口左上角离屏幕左上角横向距离
window.screenY: 窗口左上角离屏幕左上角纵向距离 标准模式下均为0. 窗口左上角离屏幕左上角纵向距离
window.innerWidth: 窗口显示区宽含滚动棒,同IE8的document.documentElement.offsetWidth:
window.innerHeight: 窗口显示区高含滚动棒,同IE的document.documentElement.offsetHeight:
window.screen.availTop   窗口最大化后的window.screenX:   窗口最大化后的window.screenX:
window.screen.availLeft 窗口最大化后的window.screenY: 窗口最大化后的window.screenY:
document.body.offsetWidth: 窗口显示区不含滚动棒宽度减去左右margin值后的数字/BODY宽度两者取大值 窗口显示区不含滚动棒宽度减左右MARGIN,最小为0
document.body.offsetHeight: BODY高度,不含滚动棒与MARGIN
document.body.scrollWidth: 同IE6的document.body.offsetWidth: 同IE8,FF,oprea的document.body.offsetWidth: 浏览器窗口的宽度,最小值取BODY加MARGINLEFT值,不含滚动棒
document.body.scrollHeight: 同IE,FF,OPREA的document.body.offsetHeight: BODY高度加MARGIN值/窗口显示区高度不含滚动棒取两者取其大
document.body.scrollLeft: 标准模式下均为0. 左滚动值
document.body.scrollTop: 上滚动值
document.body.clientTop: 标准模式下均为0.
document.body.clientLeft: 标准模式下均为0.
document.body.clientWidth: 窗口显示区不含滚动棒宽度/BODY宽度两者之最大值 同IE8,FF,oprea的document.body.offsetWidth:
document.body.clientHeight: 同IE,FF,OPREA的document.body.offsetHeight:
document.documentElement.offsetWidth: 窗口显示区的宽度,含滚动棒 浏览器窗口的宽度,不含滚动棒
document.documentElement.offsetHeight: 窗口显示区的高度,含滚动棒 BODY高度加MARGIN
document.documentElement.scrollWidth: 窗口显示区宽度不含滚动棒/BODY加两边MARGIN两者中大值 窗口显示区不含滚动棒宽度/BODY宽度加左GARGIN值两者中最大值
document.documentElement.scrollHeight: BODY的高度 BODY加上下MARGIN值 窗口显示区不含滚动棒高度/body加上下MARGIN两者中最大值 同IE8
document.documentElement.scrollLeft: 左滚动值 0
document.documentElement.scrollTop: 上滚动值 0
document.documentElement.clientTop: 2 标准模式下均为0.
document.documentElement.clientLeft: 2 标准模式下均为0.
document.documentElement.clientWidth: 窗口显示区的宽度,不含滚动棒
document.documentElement.clientHeight: 窗口显示区的高度,不含滚动棒
document.width:   同IE8,FF,oprea的document.body.offsetWidth:   同document.body.scrollWidth
document.height: 同IE8,FF,oprea的document.body.offsetWidth: document.body.s


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js 窗口 高和] 推荐:

JS中取得的关于窗口宽高和滚动值的属性列表:(转载)

- - JavaScript - Web前端 - ITeye博客
  在工作中尝试把一个FLASH居中全屏放置,窗口RESIZE的时候和页面SCROLL的时候都要动态变化,需要取得当前窗口显示区域的WIDTH与HEIGHT,翻了翻资料脑子就一半面一半水搅匀了.   而且我痛苦的发现,同一个属性,在不同的浏览器的JS取值是不一样的,甚至是无效的,就算都在IE中不同版本的值也不一样的,W3C的标准就从没被完整执行过,微软丈着本钱厚,肆意修改其定义,而且朝三暮四,同样一个事在版本升级时也搞出不同的标准来,一看开发组群就不是一个娘养的.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.

Three js入门教程

- - 译言-电脑/网络/数码科技
译文来源: http://www.21haolou.com/articles/show/140. 我在自己的一些实验性项目中运用了 Three.js,它在处理浏览器3D效果方面表现优异. 通过Three js,你可以创建镜头(Cameras),物体(objects),光线(lights),材质(materials)等等,你还可以选择渲染器:可以使用HTML5的Canvas来绘制场景,也可选择使用WebGL或是SVG来渲染.