Javascript 获取页面高度(多种浏览器)
//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 获取页面高度(多种浏览器)的更多相关文章
- 关于javascript获取页面高度宽度
在市容市政项目中,计算jqgrid的自适应高度时,发现jQuery(window).height()和jQuery(document).height()的数值有差异. 最初使用的是jQuery(doc ...
- javascript 获取页面的高度及滚动条的位置的代码
http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- js里获取页面高度和文档高度
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
随机推荐
- chrome模拟手机功能
在搭建好web側环境之后.能够使用chrome来模拟手机的功能 直接上图吧: 图1是直接模拟一个通用的界面 图2里面能够选择不同的手机型号,还是比較全的! 选择一个查看一下,和手机是一样的效果,非常赞 ...
- nls 字符编码文件对应的国家语言
原文 http://ftp.twaren.net/cpatch/faq/tech/tech_nlsnt.txt * updated by Kii Ali, 12-11-2001 ftp://ftp.n ...
- Funui-Theme 资源的替换
实现资源的替换,需要分为以下几个步骤 1.找到需要更改的模块 mediatek/packages/apps/FileManager 2.到主题模块下根据包名找到相应资源(以Grass为例) cd ve ...
- ps的入门
ps的入门 http://www.cnblogs.com/qingci/archive/2012/09/20/2694728.html
- SGU 253 Theodore Roosevelt 快速判断点是否在凸包内
http://acm.sgu.ru/problem.php?contest=0&problem=253 题意简单易懂...给你n个点的凸包(经测试已经是极角序)...判断m个点是否在凸包内.. ...
- [JWT] JWT Signature With RS256 - Learn The Advantages Compared to HS256
The advantage of RS256 over HS256 is RS256 no longer need to share the secret key between client and ...
- 让ie6 7 8 9支持原生html5 websocket
让ie6 7 8 9支持原生html5 websocket 从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...
- sass工具、相关插件
http://koala-app.com/index-zh.html 下载koala 把css文件夹(包含.scss后缀的文件)整个拖进去: 然后在sublime打开.scss文件编译,自动生成css ...
- 如何把excel同一个单元格内的文字和数字分别提取出来?
平台:excel 2010 目的:把excel同一个单元格内的文字和数字分别提取出来 操作: 假设数据在A1单元格:如果文字在前,B1=left(A1,lenb(A1)-len(A1))可得文字,C1 ...
- 2016最热门的PHP框架(一共五款)
摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...