document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题。这两个应该不是一个东西。

页面中加了:<!DOCTYPE html>

很明显在谷歌浏览器中两个值不是一个概念。

页面中不加:<!DOCTYPE html>

发现两个的值掉了个个!

所以这里有几个问题要搞明白:

1.<!DOCTYPE html>是什么

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<!DOCTYPE html>这个的意思就是告诉浏览器页面是html。并且使用html5最新规范来处理。

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2.document.body与document.documentElement的含义是什么

document.body指的是html节点中的body节点

document.documentElement值得是根节点,即html节点。

3.document.documentElement.clientHeight 与 document.body.clientHeight有时候相等的问题

所以这里我就搞不明白有些人这么写的意思了??:var a = document.documentElement.clientHeight || document.body.clientHeight

要想等是不?我们只需要设置body,html{ height: 100%}

其实这么设置的想法我知道是啥,就是想高度与内容一致。

可是这里就有个问题了,这里的100%是一屏的高度。就会出现这样的断层。

如下:

当有滚动条的时候,这样的设置应该是不合理的!

百度首页因为是一屏不会出现滚动条,所以两个值是相等的。

结论:个人认为,document.documentElement.clientHeight用来获取页面可视高度更加准确。

时间: 2024-10-05 19:12:56

document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)的相关文章

使用$(window).width(),window.outerWidth,window.innerWidth,document.documentElement.clientWidth,document.body.clientWidth的区别与兼容分析

下面先以谷歌为例做数据分析,兼容性问题后面再说. 先上一张图(图最好理解): firebug打印结果: 使用$(window).width()与$(window).height():1349 392 使用window.outerWidth与window.outerHeight:1366 728 使用window.innerWidth与window.innerHeight:1366 392 使用document.documentElement.clientWidth与document.docume

document.body、document.documentElement和window获取视窗大小的区别

来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight – 浏览器窗口的内部高度 window.innerWidth – 浏览器窗口的内部宽度 对于 Internet Explorer 8.7.6.5: document.

document.documentElement和document.body区别

body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 没使用DTD情况即怪异模式BackCompat下: document.documentElement.clientHeight=0 document.body.c

document.documentElement和document.body区别以及获取浏览器的宽高

原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 2.没使用DTD情况即怪异模式BackCompat下: 代码如下: document.documentElement.clientHeight=0document.body.clientHeight=618 使用DTD情况即标准模式CSS1

document.documentElement和document.body区别介绍

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

document.documentElement.clientWidth

<script>function getInfo(){var s = "";s = " 网页可见区域宽:" document.body.clientWidth;s = " 网页可见区域高:" document.body.clientHeight;s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";s = " 网页可见区域高

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.style.top=document.body.scrollTop+"px"; } 可是怎么没有达到预期效果呢,输出document.b

document.documentElement和document.body 与document.compatMode的关系

首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声

document.documentElement.scrollTop

要获取当前页面的滚动条纵坐标位置, 用:      document.documentElement.scrollTop; 而不是:      document.body.scrollTop; documentElement 对应的是 html 标签,而 body 对应的是 body 标签. 在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替    如果你想定位鼠标相对于页面的绝对位置时,你会发现