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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
详解AngularJS controller调用factory
May 19 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
JS实现简易留言板(节点操作)
Mar 16 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
PHP添加MySQL数据记录代码
2008/06/07 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php中使用websocket详解
2016/09/23 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
javascript的push使用指南
2014/12/05 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
个人收入证明范本
2014/01/12 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python