document.documentElement 与document.boay 的区别

最新推荐文章于 2024-03-22 14:25:18 发布

原创最新推荐文章于 2024-03-22 14:25:18 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了InterActiveEditor在不同IDE环境下Resize功能的行为差异，并深入分析了DOCTYPE声明如何影响浏览器的渲染模式，提供了相应的解决方案。

1.问题的引发：重构InterActiveEditor，在 WebStorm中浏览可以进行Resize，打包到Eclipse中不能进行Resize
在WebStorm中document.documentElement.clientHeigh能够获取高度，
嵌套到portal中， document.documentElement.clientHeigh 不能够获取到高度，是一个固定值
2. 引发问题原因
查看相关文档跟DTD有关
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

3.什么是DTD
DTD (Document Type Definition)：文档类型定义：是一套为了进行程序间的数据交换而建立的关于标记符的语法规则：
说白了也就是XML标记符的语法规则，是用来验证XML文件格式的验证机制，是XML的一个组成部分。
全写<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
可以写成 <!DOCTYPE html>

4.为什么使用 <!doctype html>
  在写html的时候需要定义文档类型；如果没有定义，浏览器在渲染页面的时候会使用怪异模式；各个浏览器在怪异模式下对各个元素渲染是有差异的。
<!doctype html>是HTML5标准网页声明,如果网页开头没有定义DTD它，浏览器就会开启怪异模式(标准模式关闭)去解析网页。如果定义了它浏览器就会在严格模式(标准模式)下解析网页。
  IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。
  每个浏览器都有自己的方式来激活怪异模式。可查看这个清单： http://hsivonen.iki.fi/doctype/
5.获取浏览器当前网页的渲染方式
   document.compatMode属性
BackCompat：标准模式关闭。
  CSS1Compat：标准模式开启。
  For example：
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。

if (document.compatMode === "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
} else { //document.compatMode === "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}