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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 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
Terran历史背景
2020/03/14 星际争霸
php桌面中心(一) 创建数据库
2007/03/11 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
yii中widget的用法
2014/12/03 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
node内置调试方法总结
2018/02/22 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
骆驼官方商城:CAMEL
2016/11/22 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书