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的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
随机推荐
- Flex读取txt文件里的内容报错
Flex读取txt文件里的内容 1.详细错误例如以下 2.错误原因 读取文件不存在 var file:File = new File(File.applicationDirectory.nativeP ...
- [转]为什么我说ORM是一种反模式
原文地址:http://www.nowamagic.net/librarys/veda/detail/2217 上周我在在上讨论了ORM,在那以后有人希望我澄清我的意思.事实上,我曾经写文章讨论过OR ...
- liunx系统安装composer与配置
1.下载composer curl -sS https://getcomposer.org/installer | php 2.我把它放在系统的PATH目录中,这样就能在全局访问它. mv compo ...
- JavaScript中trim 方法实现
Java中的 String 类有个trim() 能够删除字符串前后的空格字符.jQuery中也有trim()方法能够删除字符变量前后的字符串. 可是JavaScript中却没有对应的trim() 方法 ...
- jQuery + Cookie引导客户操作
网址:http://www.sucaihuo.com/js/707.html 示例:http://www.sucaihuo.com/jquery/7/707/demo/
- Entity Framework中的主从表关系的使用
其关系图: 我们使用Entity Framework生成映射关系如下: 其中author表中的books导航属性为一个集合,表示当前作者的书. 在页面中我们可以使用如下代码来实现: 代码中author ...
- C++ 矩阵计算库 :Eigen库
Eigen http://eigen.tuxfamily.org/index.php?title=Main_Page 下载http://bitbucket.org/eigen/eigen/get/3. ...
- Golang中的正则表达式
声明:文章转自GoLove 用法: 单一: . 匹配任意一个字符,如果设置 s = true,则可以匹配换行符 [字符类] 匹配"字符类"中的一个字符,"字符类" ...
- IO-Polling的代码分析
在前一篇文章<IO-Polling实现分析与性能评測>中提到了IO-Polling与中断的原理差别,并通过两种模式下NVMe SSD的性能測试对两者进行了对照. 这篇文章将深入到IO-Po ...
- ios中的coredata
本文转载至 http://blog.csdn.net/chen505358119/article/details/9334831 分类: ios2013-07-15 18:12 12449人阅读 评论 ...