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的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
随机推荐
- shell脚本中处理 路径中中文和空格方法
OLDIFS=$IFS IFS=$'\n' #存放路径的变量在引用时都使用双引号括起来 "$VAR_PATH" #路径拼接时后续的旧不需要加双引号了"$VAR_PATH& ...
- python3输出指定log信息
问题背景: win10 python xxx.py > c:test.txt 上面这句只能把信息输出到test.txt,但是控制台看不到信息 ########################## ...
- [开源]C#中开源软件大汇总(外国的)
一.博客类项目 1.SubText 项目介绍:Subtext 是一个个人博客发布平台,详细的介绍请进SubText 项目分类:博客 项目license:BSD License 项目主页:http:// ...
- grails email 发送邮件插件
1.配置email插件,在Config.groovy文件中配置: plugins { compile ":mail:1.0.5" } 2.配置Config.groovy文件: gr ...
- 如何解决HTML在各种浏览器的兼容性
方法/步骤 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于 ...
- 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
- Struts2 是什么？
Struts2是流行和成熟的基于MVC设计模式的Web应用程序框架. Struts2不只是Struts1下一个版本,它是一个完全重写的Struts架构. WebWork框架开始以Struts框架为基础 ...
- Tomcat (7.0)数据源配置
在Tomcat这个Java Web容器下通过配置DataSource(数据源)对象能够解决上面所述的问题. JDBC中的javx.sql.DataSource接口负责建立于数据库的连接.程序中直接从数 ...
- echarts(3.0)的基本使用(标签式导入)
function loadRainFallCharts(msg) { var obj = {}; obj.x = []; obj.y = []; obj.line = []; var accumula ...
- HBuilder 连接 夜神安卓模拟器
由于HBuilder的自动扫描机制无法直接连上夜神模拟器,需要通过cmd命令窗口手动处理,才能将两者建立连接. 首先,启动HBuilder和夜神模拟器 然后,打开cmd命令提示符 cd进入夜神模拟器b ...