//2015年8月13日11:00:50

网页可见区域宽: 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

jquery
获取浏览器显示区域的高度 : $(window).height();  获取浏览器显示区域的宽度 :$(window).width();  获取页面的文档高度 :$(document).height();  获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();  获取滚动条到左边的垂直宽度 :$(document).scrollLeft(); 
计算元素位置和偏移量  offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。  offset(options, results)  options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。  options.scroll  是否把 滚动条计算在内,默认TRUE  options.padding  是否把padding计算在内,默认false  options.margin   是否把margin计算在内,默认true  options.border  是否把边框计算在内,默认true

//2015年8月13日11:00:57 end

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中: 
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

Javascript 获取页面高度(多种浏览器)的更多相关文章

  1. 关于javascript获取页面高度宽度

    在市容市政项目中,计算jqgrid的自适应高度时,发现jQuery(window).height()和jQuery(document).height()的数值有差异. 最初使用的是jQuery(doc ...

  2. javascript 获取页面的高度及滚动条的位置的代码

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

  3. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  4. html页面高度不同浏览器兼容性设置

    页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...

  5. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  6. js里获取页面高度和文档高度

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  7. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  8. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  9. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

随机推荐

  1. [51Nod]NOIP2018提高组省一冲奖班模测训练(二)

    http://www.51nod.com/contest/problemList.html#!contestId=73&randomCode=4408520896354389006 还是原题大 ...

  2. Arrays.asList()方法的限制

    Arrays.asList()方法的限制是他对所产生的List类型做出了最理想的假设 package example; import java.util.Arrays; import java.uti ...

  3. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  4. 七、Docker+nginx

    原文:七.Docker+nginx docker run -p 80:80 --name nginx-v1.0.0 -v /usr/nginx/www:/www -v /home/docker/ngi ...

  5. asp.net 查询sql数据表的网页模板

    最近因为工作需求,要制作一个网页模板,主要是用于快速开发,可以查询Sql数据表信息的模板, 昨天做好了,这个只是一个Demo,但是功能已经齐全了, 开发新的网站时,需要新增一个xml,复制粘贴网页的前 ...

  6. 用jquery获取单选按钮选中的内容 和 获取select下拉列表选中的值

    1.<label><input name='reason' type='radio' value='您的评论内容涉嫌谣言' />您的评论内容涉嫌谣言</label> ...

  7. noi25 最长最短单词(为什么会出现运行时错误)

    noi25 最长最短单词(为什么会出现运行时错误) 一.总结 一句话总结:比如除以零,数组越界,指针越界,使用已经释放的空间,数组开得太大,超出了栈的范围,造成栈溢出 1.c++报runtime er ...

  8. Oracle10g中阻塞锁查询更简单

    http://blog.itpub.net/195110/viewspace-677572/ http://blog.sina.com.cn/s/blog_636415010100khcl.html

  9. ex.Message "ORA-01691: Lob 段 USER_MURPHY.SYS_LOB0000093717C00006$$ 无法通过 1024 (在表空间 ZJHH 中) 扩展"

    Oracle,往数据库里导入dmp的时候报错:ORA-01691:Lob 段 无法通过8192(在表空间TS_SI中)扩展 解决方案1: 原因:所创建的表空间不足. 创建一个可拓展的表空间 creat ...

  10. SorceTree 与 Bitbucket连接

    选择bitbucket,由于bitbucket免费的帐号最多能够8个人一起协同开发.我们项目组人数少于8个,私有仓库也不限制. 经过半个多月的应用,大家感觉也还不错,对个人而言.在家也能訪问代码,对公 ...