document.documentElement和document.body

最新推荐文章于 2022-03-21 17:34:21 发布

hey_bei

最新推荐文章于 2022-03-21 17:34:21 发布

阅读量787

点赞数

分类专栏： javascript

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

document.documentElement 对XML以及HTML文档中的文档根结点的引用，如html

document.body 对Document对象中的<body>标签的访问，对于定义了框架集的文档，该属性引用最外层的 <frameset>。

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

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

w3c说：

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

hey_bei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.documentElement和document.body

document.documentElement 对XML以及HTML文档中的文档根结点的引用，如htmldocument.body 对Document对象中的标签的访问，对于定义了框架集的文档，该属性引用最外层的。 IE在怪异模型（quick mode）下document.documentElement无法正确取到cl
复制链接

扫一扫