document.body和document.documentElement的区别

最新推荐文章于 2024-02-25 12:07:44 发布
原创 最新推荐文章于 2024-02-25 12:07:44 发布 · 1.8k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#firefox #border #ie #html #文档
本文深入探讨了在DOM中使用document.body和document.documentElement的区别，特别是它们的scrollHeight属性如何反映不同浏览器的行为差异。通过对比分析，揭示了在网页布局和滚动处理中理解这些差异的重要性。

document.body和document.documentElement比较：

document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。


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高度

这是DOMDocument对象里的body子节点和整个节点树的根节点root。

JS的操作之 窗口滚动的操作
谨言的博客
07-13 1967
窗口中，左上角为原点，也就是x =0,y=0，右上角的坐标 y = 0，左下角的坐标 x = 0 滚动到窗口的哪个像素：window.scrollTo(x,y) 如果x轴不变，那么x轴就是0 滑动到窗口最底部 window.scrollTo(0,document.body.scrollHeight) 滑动到窗口中间 window.scrollTo(0,document.body.scrollHeight/2) 将元素滑动到可是范围内 1）找到需要定位的元素 2）将元素滚动到...
srcollTop、clientHeight、scrollHeight详解
记录点滴
10-16 1272
原生js： scrollTop —— 滚动条滚动的距离（注意：不是滚动条距顶端的距离） scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 clientHeight —— 窗口可视范围的高度 当clientHeight + scrollTop >= scrollHeight时，表示已经抵达内容的底部了，可以加载更多内容。 scrollTop： 可以通过 window.pageYOffset 或 document.documentElement.scro...
关于Chrome谷歌浏览器版本更新对 document.body.scrollHeight 等 兼容日常小记
Jack_zengzhen的博客
01-09 1万+
近期项目导航栏有个地方是使用document.body.scrollHeight  来计算高度，发现我浏览器计算高度没有问题，而同事都有问题（PS:以前我们浏览器都没问题的）。比较了差异，我的谷歌浏览器是55.0的，同事都是66.0的，可能是浏览器版本问题，后来用方法解决了，所以现在记录下来 先了解下面的内容，再说解决问题 浏览器所有内容高度：  浏览器整个框架的高度，包括滚动条卷去部
关于Chrome谷歌浏览器版本更新对 document.body.scrollHeight 等 兼容日常小记
lmj3732018的博客
02-25 5032
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop。分割线---------------------------------------------------document.documentElement.scrollHeight——浏览器可视部分高度。document.documentElement.scrollHeight——浏览器可视部分高度。
ie7浏览器_4种方案解决CSS浏览器兼容性问题
weixin_39630637的博客
11-14 644
点击右上方红色按钮关注“web秀”，让你真正秀起来前言前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。4种方案解决CSS浏览器兼容性问题为什么会有浏览器兼容性问题？还不是因为浏览器厂商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗...
document.body 和 document.documentElement 的区别
前端产品工程师
02-07 1070
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代docum
document.documentElement和document.body的区别
weixin_42169395的博客
12-24 251
document.documentElement和document.body的区别 网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： <div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll = function () { var div = doc
【转】document.documentElement和document.body的区别
lalala762的博客
09-14 187
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： window.onscroll = function () { var div = document.getElementById("div"); div.style.top = document.body.scrollTop + "px"; } 运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是
document.body.scrollHeight
dengpinshuo2520的博客
10-09 541
<SCRIPT LANGUAGE="JavaScript"> alert('------直接------->'+document.body.scrollHeight); var a = document.body.scrollHeight; alert("---单独---->"+a); </script> 上面代码放到网页中： --...
document.body.scrollHeight 取值不变
点点滴滴
04-07 1105
遇到一个奇葩的问题,document.body.scrollHeight一直不变,不会因为content 内容的高度而变化 原因: 就是因为下面这个样式设定,overflowX.
网页尺寸scrollHeight/offsetHeight
QDY5945的博客
11-06 299
scrollHeight和scrollWidth，获取网页内容高度和宽度。 一、针对IE、Opera: scrollHeight 是网页内容实际高度，可以小于 clientHeight。 二、针对NS...
图解初识JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop概念
qq_26780317的博客
04-10 3988
前言：clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop这几个概念，在网上浩如烟海的文章中基本上都是文字解释，工具书中给出的图解也有些晦涩难懂，很难想象具体在窗口中的哪一部分。这次通过在网上查阅一些资料，在此mark一下，给出下文的图文相关解释。 一、整体初印象 首先，我们先来看一张图片，对这几个概念有一些初步的印象： 二...
从浏览器多进程到JS单线程
weixin_41682025的博客
12-07 285
浏览器都包含哪些进程？ （仅列举主要进程） Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有 负责浏览器界面显示，与用户交互。如前进，后退等 负责各个页面的管理，创建和销毁其他进程 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上 网络资源的管理，下载等 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建 GPU进程：最多一个，用于3D绘制等 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 17万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
document.body元素上的clientHeight, offsetHeight, scrollHeight
ForMyQianDuan的博客
04-27 3216
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html, body { height: 100%
iframe自适应高度 document.body.scrollHeight取值不对
CHOUFENGDDDDDD的博客
01-07 5907
springmv 切换iframe 时发现直接修改iframe src 或者使用 location.href = "“时不起作用 之后才有form 标段提交 在control中返回新网页的地址 才完成了网页切换   之后iframe自适应高度有出现了问题 子页面中使用document.body.scrollHeight获取的高度值不对   在iframe引用的前一个页面的高度比ifra...
document.body和document.documentElement比较
weixin_30449453的博客
11-23 102
document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。 IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把html作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值