document.documentElement和document.body区别介绍


Posted in Javascript onSeptember 16, 2013

区别:

body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;

没使用DTD情况即怪异模式BackCompat下:

document.documentElement.clientHeight=0document.body.clientHeight=618

使用DTD情况即标准模式CSS1Compat下:
document.documentElement.clientHeight=618 document.body.clientHeight=28(表示内容的高度)

因此提取浏览器的尺寸是要注意了。可以参考以下代码:
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.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; 
}
Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
JS 常用校验函数
Mar 26 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
使用js在页面中绘制表格核心代码
Sep 16 #Javascript
Function.prototype.bind用法示例
Sep 16 #Javascript
javascript简单事件处理和with用法介绍
Sep 16 #Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 #Javascript
js window.print实现打印特定控件或内容
Sep 16 #Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 #Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
经济担保书范文
2014/04/02 职场文书
报告会主持词
2014/04/02 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
nginx内存池源码解析
2021/11/20 Servers