document.body 和 document.documentElement 的属性区别

最新推荐文章于 2022-12-06 10:44:52 发布
最新推荐文章于 2022-12-06 10:44:52 发布
阅读量667 收藏 1
点赞数
分类专栏： html document 文章标签： document clientHeight
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyingdi/article/details/48393679
版权

今天研究document的一些属性和方法的使用，结合其他前人的文章，来了解document对象。

得到各个属性如下： 

网页可见区域宽： document .body.clientWidth; 
网页可见区域高： document .body.clientHeight; 
网页可见区域宽： document .body.offsetWidth   (包括边线的宽); 
网页可见区域高： document .body.offsetHeight (包括边线的宽); 
网页正文全文宽： document .body.scrollWidth; 
网页正文全文高： document .body.scrollHeight; 
网页被卷去的高： document .body.scrollTop; 
网页被卷去的左： document .body.scrollLeft; 
网页正文部分上： window.screenTop; 
网页正文部分左： window.screenLeft; 
屏幕分辨率的高： window.screen.height; 
屏幕分辨率的宽： window.screen.width; 
屏幕可用工作区高度： window.screen.availHeight; 
屏幕可用工作区宽度：window.screen.availWidth; 

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：相对文档的水平座标+垂直方向滚动的量

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别，在IE8\9\10\11、chrome、FF测试了下：

当没有<!DOCTYPE html>标签时，

  1. 在IE10以下的版本，document.body.clientHeight < document.documentElement.clientHeight，在IE10以上包括IE10的版本，document.body.clientHeight = document.documentElement.clientHeight，但都没有出现document.body.clientHeight  = 0的情况；
  2. 在FF下，document.body.clientHeight > document.documentElement.clientHeight，但也没有出现document.body.clientHeight  = 0的情况；
  3. 在chrome下，document.body.clientHeight = document.documentElement.clientHeight，但也没有出现document.body.clientHeight  = 0的情况；
  4. 三种浏览器document.body.clientHeight和document.documentElement.clientHeight高度值不一样的；
  5. 三种浏览器下document.body.scrollTop和document.documentElement.scrollTop的值为0（未测有滚动条的情况）。
在有<!DOCTYPE html>标签时，
  1. 在IE所有的的版本，document.body.clientHeight < document.documentElement.clientHeight，但都没有出现document.body.clientHeight  = 0的情况；
  2. 在FF下，document.body.clientHeight < document.documentElement.clientHeight，但也没有出现document.body.clientHeight  = 0的情况；
  3. 在chrome下，document.body.clientHeight < document.documentElement.clientHeight，但也没有出现document.body.clientHeight  = 0的情况；
  4. chrome下，document.body.clientHeight = document.documentElement.clientHeight，但也没有出现document.body.clientHeight  = 0的情况；
  5. 三种浏览器下document.body.scrollTop和document.documentElement.scrollTop的值为0（未测有滚动条的情况）。
测试html：需要说明的是FF下span标签的innerText不会在页面显示，但开发者工具调试发现，其实是有值的。 
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><title> New Document </title>
<span style="white-space:pre">		</span><script type="text/javascript">
<span style="white-space:pre">			</span>function a() {
<span style="white-space:pre">				</span>document.getElementById("bodyHeight").innerHTML = document.body.clientHeight;
<span style="white-space:pre">				</span>document.getElementById("documentHeight").innerHTML = document.documentElement.clientHeight;
<span style="white-space:pre">				</span>document.getElementById("bodyTop").innerHTML = document.body.scrollTop;
<span style="white-space:pre">				</span>document.getElementById("documentTop").innerHTML = document.documentElement.scrollTop;
<span style="white-space:pre">			</span>}


<span style="white-space:pre">		</span></script>
<span style="white-space:pre">	</span></head>


<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><p>
<span style="white-space:pre">			</span><a href="javascript:a()">click here</a>
<span style="white-space:pre">			</span><br/>
<span style="white-space:pre">			</span>document.body.clientHeight = <span id="bodyHeight"></span> px
<span style="white-space:pre">			</span><br/>
<span style="white-space:pre">			</span>document.documentElement.clientHeight = <span id="documentHeight"></span> px
<span style="white-space:pre">			</span><br/>
<span style="white-space:pre">			</span>document.body.scrollTop  = <span id="bodyTop"></span> px
<span style="white-space:pre">			</span><br/>
<span style="white-space:pre">			</span>document.documentElement.scrollTop  = <span id="documentTop"></span> px
<span style="white-space:pre">		</span></p>
<span style="white-space:pre">	</span></body>
</html></span>
总结：页面记得加上<!DOCTYPE html>标签。以免出现很难发现的bug。

上传一张其他网站上的一张标记图片：


xiaoyingdi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
大屏：页面在不同比例屏幕的显示适配与字体随屏幕改变而改变（字体随屏幕分辨率改变自适应的问题）
萌兔兔MMQ！！
07-19 2637
document.documentElement.style.fontSize=document.documentElement.clientWidth/1280+‘px’;我这里的1280是目前自己写页面的屏幕尺寸。但此时又有一个问题一个正方形页面如何，在一个长方形平屏幕等比例显示呢我就采用比例的方式。考虑到一些组件，比如echarts字体都是以px为标准，此时可以写一个方法。1280和884都是此时我开发用的屏幕。然后在样式中，采用rem进行字体设置。开发中遇到大屏小屏来回切换的问题。...
一篇真正教会你开发移动端页面的文章(二)
tongluren381的博客
03-19 660
来源：HcySunYang http://hcysun.me/2015/10/19/一篇真正教会你开发移动端页面的文章-二/ 之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面 好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多...
使用 document.documentElement.style 实现主题换肤
Lyrelion的博客
11-09 2808
使用 document.documentElement.style 实现主题换肤
rem.js
睡不够
10-09 453
(function(win,lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flex
宽度、高度自适配比
L824627453的博客
10-08 363
//宽度 document.documentElement.style.fontSize=document.documentElement.clientWidth*50/375+"px"; window.onresize=function(){ document.documentElement.style.fontSize=document.documentElement.clientWidth*50/375+"px"; } //高度 <script> ...
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
前端设置页面字体尺寸跟随屏幕大小而进行变化
梦想成为全栈的切图仔
10-19 6457
window.onresize的意思是，当监测到屏幕分辨率变的时候，所以我们需要一个操作就是，页面一加载完成，我们给window.onresize 绑定一个方法。这是因为，每次window.onresize 都会去执行 resize，而在屏幕分辨率发生变化的时候，window.onresize 和浏览器的自身实现有关系.不同的浏览器和操作系统实现可能不一样,目前谷歌是执行了两次，有是时候是一次。我们去页面上查看，会发现当我们拖动文档流的时候，字体并不会重新设置。1. 我们需要一个监测屏幕分辨率的方法。
项目问题
weixin_43585219的博客
09-18 145
一、Px2rem 1、 document.documentElement.style.fontSize = document.documentElement.clientWidth / ( 750 / 75 ) + 'px'; 二、gulp和webpack 1、gulp 是自动化构建工具， var less = require('gulp-less') gulp.task('lessTask', function() { gulp.src('src/less/*.less') 比如启动
设置字根，配合rem适配（多尺寸屏幕的适配）
Yetian_2000的博客
02-23 234
document.documentElement.style.fontSize这个就是字根，（但相对的只是HTML根元素字体大小。） rem单位就是相对HTML根元素字体大小 rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
移动端使用rem实现适配
qq_40430937的博客
12-06 269
移动端使用rem实现适配
通过js动态设置字体大小
xzj0197的博客
12-01 2590
<script> function setRem() { var uiW= 375; // 获取屏幕的宽度 var clientWidth = document.documentElement.clientWidth || document.body.clientWidth; // 通过js动态改变html根节点字体大小 var html= document.getElementsByTagN...
移动端适配rem
weixin_43671682的博客
09-23 92
主要原理是因为rem是根据根目录来计算的，这里我们需要做的就是将设置不同设备的根目录，以下2个代表1rem代表100px <script> (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
html与css基础
V________的博客
09-10 98
8.17总结 1.重置文件：让相同标签在不同浏览器中显示相同样式 2.判断主流浏览器，内核是不是自主研发 3．主流浏览器 4.开发思路-----垂直化 1.用户群体 A.渐进增强：先搭结构，根据用户，添加功能 B.优雅降级：先开发所有功能。根据用户，进行删减 5. doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + ‘px’; rem fontSize：设置文件字体大小， winWidth：获取当前屏幕宽度，1080为设计稿尺寸， 6
移动端常见适配方案
龙骑士-黎明的博客
06-06 5522
移动端常见适配方案
移动端适配方案以及面试总结（初学者看出来）
热门推荐
weixin_52703987的博客
12-05 2万+
移动端适配的方案 概念： 所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示 方法一：JS动态修改配合CSS预处理器（less） // 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 计算字体大小，取屏幕宽度的16分之一 var size = screen / 16; // 设置根元素字体大小 document.documentElement.style.fontSize = size + 'px'; js获取当前
rem和vw,vh 移动端自适应
布里渊区
04-25 677
rem布局的本质是基于宽度的等比缩放 rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。 function refreshRem() { var docEl = doc.documentElement;
这个什么意思function getScrollLeft() { if (self.pageXOffset) { return self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollLeft) { return document.documentElement.scrollLeft; } else if (document.body) { return document.body.scrollLeft; }
最新发布
06-06
这是一个 JavaScript 函数，用于获取当前页面的水平滚动条的位置（即页面向右滚动的距离）。函数首先检查浏览器是否支持 `pageXOffset` 属性，如果支持则返回该属性的值；如果不支持，则检查 `document.documentElement.scrollLeft` 和 `document.body.scrollLeft` 属性的值，并返回其中第一个非空的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值