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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
require.js中的define函数详解
2017/07/10 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python交互式图形编程实例(三)
2017/11/17 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python Lambda函数使用总结详解
2019/12/11 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
市场安全管理制度
2014/01/26 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2015年党员承诺书
2015/01/21 职场文书
环保守法证明
2015/06/24 职场文书
职工食堂管理制度
2015/08/06 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
MySQL 计算连续登录天数
2022/05/11 MySQL