window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别

window.innerHeight属于BOM(浏览器对象模型),获取的高度包含横向滚动条 document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条 document.body.clientHeight属于文档对象模型,body高度,如果设置body height=100%,document.documentElement.clientHeight=document.body.clientHeight <!DOCTYPE html> <…

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.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的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部【转载】

前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点. 第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问. [文档类型已申明] IE document.do…

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 document.documentElement.scrollTop 浏览器滚动部分高度,document.body.scrollTop 始终为0 document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有…

document.body.clientHeight与document.documentElement.clientHeight

当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 的时候,document.body.clientHeight就用不了,页面无限…

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

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

火狐、谷歌、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.clientWidth

document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s = " 网页可见区域宽:" document.body.clientWidth; s = " 网页可见区域高:" doc…

js中document.documentElement 和document.body 以及其属性 clientWidth等

在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document .documentElement来取代document .body,可以这样写例: var top = document .documentE…

document.documentElement 和document.body 以及其属性

js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body --XHTML里是document.documentElement ,都指的是节点(OR元素)) 在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如…

document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.style.top=document.body.scrollTop+&…

【转】document.documentElement和document.body的区别

转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div> wind…

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 = document.getElementById(&quo…

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…

js中的document.body.scrollTop与document.documentElement.scrollTop

获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft 1.各浏览器下 scrollTop的差异: IE6/7/8:可以使用 document.documentElement.scrollTop: IE9及以上:可以使用window.pageYOffse…

document.documentElement和document.body区别介绍

document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点root 即标签没有使用DTD 情况下,即怪异模式Backcompat下 document.documentElement.clientHeight = 0 document.body.clientHeight = 618 使用DTD 情况下即标准模式css1 document.documentEl…

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情况即标准模…

页面元素的定位：getBoundingClientRect()和document.documentElement.scrollTop

1.document.documentElement.getBoundingClientRect MSDN对此的解释是: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordin…

document.body.scrollTop or document.documentElement.scrollTop

用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素,而document.documentElement则相当于整个HTML,说明浏览器在解释渲染后的页面位置范围是存在不同的,FF.Opera和IE浏览器认为在客户端浏览器展示的页面的内容对应于整个HTML,所以使用document.…

document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight

FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scrollTop || document.documentElement.scrollTop; //不等价…

document.body与document.documentElement

document.body 获取的是body,document.documentElement获取的是html,在任何浏览器上都是如此相关问题: 1.获取页面滚动条滚动距离 chrome,safari上用document.body.scrollTop,document.documentElement.scrollTop恒为0 firefox,IE上用document.documentElement.scrollTop,document.body,scrollTop恒为0 2.document.…

document.documentElement.scrollTop(获取滚动条位置)

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

document.body 与 document.documentElement区别介绍

什么是document.body? 返回html dom中的body节点即<body> 什么是 document.documentElement? 返回html dom中的root 节点即<html> document.documentElement 与 document.body的应用场景获取 scrollTop 方面的差异在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存…

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三个属性: clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内…