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 相关文章推荐
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
Vue组件中slot的用法
Jan 30 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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+MSSQL分页的例子
2006/10/09 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
python 测试实现方法
2008/12/24 Python
python和C语言混合编程实例
2014/06/04 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
OpenCV 边缘检测
2019/07/10 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python如何查看网页代码
2020/06/07 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
初三物理教学反思
2014/01/21 职场文书
原材料检验岗位职责
2014/03/15 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年人事科工作总结
2015/04/28 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server