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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
详解php中 === 的使用
2016/10/24 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
理解JS绑定事件
2016/01/19 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python性能优化技巧
2015/03/09 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python实现简单中文词频统计示例
2017/11/08 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python实现共轭梯度法
2019/07/03 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
前台文员岗位职责
2013/12/28 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年业务工作总结
2014/11/17 职场文书