IE与FF下javascript获取网页及窗口大小的区别详解


Posted in Javascript onJanuary 14, 2014

在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别:

<script language="javascript">
function getInfo()
{
    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 += " 网页被卷去的高(ff):"+ document.body.scrollTop;
    s += " 网页被卷去的高(ie):"+ document.documentElement.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 +" 像素/英寸";
    alert (s);
}
getInfo();
</script>

在本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。

而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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高)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
<div id="tool">
      <input type="button" value="提交">
      <input type="button" value="重置">
</div>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
IE与FF下javascript获取网页及窗口大小的区别详解

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均无关)

Javascript 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
JS前端笔试题分析
Dec 19 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 #Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 #Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 #Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 #Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 #Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 #Javascript
移动节点的jquery代码
Jan 13 #Javascript
You might like
example2.php
2006/10/09 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
python 显示数组全部元素的方法
2018/04/19 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python中partial()基础用法说明
2018/12/30 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
学校清明节活动总结
2014/07/04 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
会议通知格式范文
2015/04/15 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技