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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
为什么node.js不适合大型项目
Apr 28 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数据流应用的一个简单实例
2012/09/14 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
EL表达式截取字符串的函数说明
2017/09/22 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue实现分页的三种效果
2020/06/23 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python xpath获取页面注释的方法
2019/01/14 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python3将变量输入的简单实例
2020/08/19 Python
python 爬取小说并下载的示例
2020/12/07 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
上海微创软件面试题
2012/06/14 面试题
计算机学生求职信范文
2014/01/30 职场文书
总经理岗位职责范本
2015/04/01 职场文书
逃课检讨书范文
2015/05/06 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python