document.documentElement和document.body区别以及获取浏览器的宽高
原文:http://www.jb51.net/article/41410.htm
1.区别:
body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;
2.没使用DTD情况即怪异模式BackCompat下:
代码如下:
使用DTD情况即标准模式CSS1Compat下:
代码如下:
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;
}
获取当前页面的滚动条纵坐标:document.documentElement.scrollTop
网页被卷去的高: document.body.scrollTop;
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
document.documentElement和document.body区别以及获取浏览器的宽高的更多相关文章
- Js怎么获取DOM及获取浏览器的宽高?
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
* 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + ...
- js获取浏览器内容宽高(小计)
<SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可见区域宽:"+ d ...
- JQ 获取浏览器窗口宽高
$(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...
- 【转】document.documentElement和document.body的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
随机推荐
- 167. Two Sum II - Input array is sorted【easy】
167. Two Sum II - Input array is sorted[easy] Given an array of integers that is already sorted in a ...
- 159. Find Minimum in Rotated Sorted Array 【medium】
159. Find Minimum in Rotated Sorted Array [medium] Suppose a sorted array is rotated at some pivot u ...
- backtrace、backtrace_symbols
参考: http://www.th7.cn/Program/cp/201308/145700.shtml http://linux.die.net/man/3/backtrace http://man ...
- Spring MVC 分离了控制器、模型对象、过滤器以及处理程序对象的角色
通过策略接口,Spring 框架是高度可配置的,而且包含多种视图技术,例如 JavaServer Pages(JSP)技术.Velocity.Tiles.iText和POI.Spring MVC 框架 ...
- nodejs rar/zip加密压缩、解压缩
1.shell/cmd命令行压缩解压缩 (1)zip压缩解压缩 zip压缩:zip -rP{密码} <目标文件.zip> <源文件> //默认覆盖现有文件 zip解压缩:zip ...
- poj 3686(拆点+最小权匹配)
题目链接:http://poj.org/problem?id=3686 思路:显然工件为X集,机器为Y集合.由于每个机器一次只能加工一个部件,因此我们可以将一台机器拆成N个点,至于部件与机器之间连多大 ...
- IDEA中的lombok插件安装以及各注解的详细介绍
IDEA中的lombok插件安装以及各注解的详细介绍 其实对于我们来说, 写好实体类后,直接用快捷方式生成get,set方法,还有 构造方法就行了,但是对于字段比较多的, 如果修改一个属性的话,就要再 ...
- 前端 为什么我选择用框架而不是Jquery
对于很多习惯用Jquery的前端甚至后端,都很不解,为什么不用Jquery而是框架.觉得框架学起来麻烦,成本高,今天我以我浅薄的知识来总结一下为什么前台开发选择用框架: 前台开发,主要的性能是卡在回流 ...
- 《UNIX网络编程》 -- 第六章
6.3 select 函数 给出描述符1.4.5而 maxfdp1 设置为6的原因: maxfdp1 是值-结果参数,这里传递的是描述符的范围,类似之前的 size_of(length).又因为描述符 ...
- iOS 静态库的制作
按照公司的想法 要开发一款SDK,于是就抽空学习一下静态枯的制作过程. 在IOS中有静态库和动态库的区分,下面我们就来详细介绍一下. 一.静态库和动态库的详细介绍. 我们平时的工程中或多或少都要引入第 ...