dom 整理2

最新推荐文章于 2021-05-24 08:53:55 发布

8427003

最新推荐文章于 2021-05-24 08:53:55 发布

阅读量723

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq8427003/article/details/11717881

版权

web前端专栏收录该内容

65 篇文章 0 订阅

订阅专栏

属性	是否只读	IE	FF	备注
浏览器距离屏幕左上角距离	是	window.screenLeft window.screenTop	window.screenX window.screenY
屏幕分辨率	是	window.screen.height window.screen.width	同IE
FF内容+滚动条+浏览器边框； Google 内容+ 滚动条； IE 内容；		document.documentElement.clientWidth	window.innerWidth
屏幕宽度（高度不包括任务栏）		screen.availWidth	同IE
滚动条被卷入的高度		document.documentElement.scrollTop	同IE
滚动条被卷入的高度（可废弃）		document.body.scrollTop	有效	（Ie ,google 没有引入DTD时 document.body.scrollTop的值始终为0）
整个滚动区域高度		document.body.scrollHeight document.documentElement.scrollHeight	同ie

比较：
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width（含滚动部分；滚动条以内，不包括滚动条(最大容器为浏览器)

，包括滚动条（最大元素不为浏览器））
clientwidth：是元素的可见宽度。等于padding+width（不含滚动部分；滚动条以内，不包括滚动条）
scrollwidth:是元素的宽度且(包括滚动部分；滚动条以内，不包括滚动条)。

E6.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

Javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别

这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0，所以菜单才显示不出来。

而取得bodyHeight 高度的语句是 var bodyHeight = document.documentElement.clientHeight;

于是在网上查找相关的资料，结合美工页面和程序的页面对比。

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

DTD已声明
IE
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

Chrome
document.documentElement.scrollHeight 浏览器所有内容高度， document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

DTD未声明
IE
document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度

FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度

Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度

浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body

3、document.documentElement.scrollTop在未声明的情况下始终为0，所以可以用来判断是否声明了DTD;

所以，判断滚动条是否已拉到页面最底部，可以用如下代码

window.onscroll  = function (){
    var marginBot = 0;
    if (document.documentElement.scrollTop){
        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;
    } else {
        marginBot = document.body.scrollHeight - document.body.scrollTop-  document.body.clientHeight;
    }
    if(marginBot<=0) {
        //do something        
    }
}

document.documentElement.scrollTop 代替 document.body.scrollTop

网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：

<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{
    var div = document.getElementById("div");
    div.style.top = document.body.scrollTop + "px";
}

运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是 DTD 的问题，要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。

如果有 DTD 时用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。

window.onscroll = function ()
{
    var oFix = document.getElementById("divfix");
    oFix.style.top = document.documentElement.scrollTop + "px";
}

DTD相关说明：

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

documentElement 和 body 相关说明：

body是DOM对象里的body子节点，即 <body> 标签；

documentElement 是整个节点树的根节点root，即<html> 标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

青春承载希望，奋斗成就未来

http://www.jb51.net/article/17719.htm

document.body和document.documentElement比较：

document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。
IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。（注：如果页面没写DTD或写的不对，IE6默认使用怪异模型解析页面）

document.body.scrollHeight和document.documentElement.scrollHeight的区别：

     document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度，且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
     IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度
     firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度

SD9013: 各浏览器对于 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异

作者：武利剑

标准参考

scroll 事件会在文档或一个元素滚动时触发。

有关 scroll 事件的详细资料：

参见：W3C DOM Level-2 规范

参见：W3C DOM Level-3 草案

问题描述

各浏览器 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异。

造成的影响

为 document、document.body、document.documentElement 对象绑定 onscroll 事件后在不同浏览器中可能不会按预期触发相应的事件处理函数。

受影响的浏览器

所有浏览器

问题分析

1.各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况

依次为 window、HTMLDivElement、document、document.body、document.documentElement 对象绑定 scroll 事件监听器，在触发滚动条事件后，将消息打印出来，最终可以汇总为下表：

	IE6		IE7		IE8		Firfox		Chrome		Safari		Opera
	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S
window 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
div 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document 对象	N	N	N	N	N	N	Y	Y	Y	Y	Y	Y	N	N
document.body 对象	Y	N	Y	Y	Y	N	N	N	N	N	N	N	Y	Y
document.documentElement 对象	N	Y	N	Y	N	Y	N	N	N	N	N	N	N	N

2. 所有浏览器支持 window 对象的 scroll 事件

分析以下代码：

<script type="text/javascript">
  window.onscroll = function(){
    document.getElementById("info").innerHTML='OK';
  };
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让浏览器出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。

在各浏览器下的输出：(移动滚动条后的截图)

	IE6 IE7 IE8 Firefox Chrome Safari Opera
window.onscroll	OK

可见，所有浏览器中的 window 对象都支持 scroll 事件。

3. 所有浏览器都支持普通 DIV 对象的 scroll 事件

分析以下代码：

<script language="javascript">
window.onload = function() {
  document.getElementById("div1").onscroll = function() {
    document.getElementById("info").innerHTML = 'OK';
  };
}
</script>
<div id="div1" style="width:100px; height:100px;border:1px solid red; overflow:scroll;">
    <div id="info" style="height:3000px; width:20px;background:green;"></div>
</div>

info 的高度设为3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么绿色背景的 div1上会出现 "OK" 的文本。

在各浏览器下的输出：(移动滚动条后的截图)

	IE6 IE7 IE8 Firefox Chrome Safari Opera
DIVElement.onscroll	OK

可见，所有浏览器中的普通 DIV 对象都支持 scroll 事件。

4. 各浏览器对 document 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
  window.onload = function() {
    document.onscroll = function() {
      document.getElementById("info").innerHTML = 'OK';
    };
  }
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。

在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE8(S) Firefox Chrome Safari	IE6(Q) IE7 IE8(Q) Opera
document.onscroll	无内容输出	OK

可见，在IE6(Q) IE7 IE8(Q) Opera 中，document.body 对象支持 scroll 事件。其他浏览器中不支持。

5. 各浏览器对 document.body 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
  window.onload = function() {
    document.body.onscroll = function() {
      document.getElementById("info").innerHTML = 'OK';
    };
  }
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。

在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE8(S) Firefox Chrome Safari	IE6(Q) IE7 IE8(Q) Opera
document.body.onscroll	无内容输出	OK

可见，在 IE6(Q) IE7 IE8(Q) Opera 中，document.body 对象支持 scroll 事件。其他浏览器中不支持。

6. 各浏览器对 document.documentElement 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
  window.onload = function() {
    document.documentElement.onscroll = function() {
      document.getElementById("info").innerHTML = 'OK';
    };
  }
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。

在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE7(S) IE8(S)	IE6(Q) IE7 IE8(Q) Opera Firefox Chrome Safari
document.documentElement.onscroll	OK	无内容输出

可见，在 IE6(S) IE7(S) IE8(S) 中，document.documentElement 对象支持 scroll 事件。其他浏览器中不支持。

解决方案

在给整个浏览器窗口绑定滚动事件 (scroll) 的时候，绑定到 window 对象上。

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.60
测试页面:	SD9013-1.html SD9013-2.html SD9013-3.html SD9013-4.html SD9013-5.html
本文更新时间:	2010-07-26

关键字

window document scroll onscroll 滚动

http://www.w3help.org/zh-cn/causes/SD9013

8427003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
dom 整理2

属性是否只读IEFF备注浏览器距离屏幕左上角距离是window.screenLeftwindow.screenTopwindow.screenXwindow.screenY 屏幕分辨率是window.screen.heightw
复制链接

扫一扫