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控制台调试的方法
Mar 07 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 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接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
对python中各个response的使用说明
2020/03/28 Python
python 追踪except信息方式
2020/04/25 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
用python绘制樱花树
2020/10/09 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
2016年9月份红领巾广播稿
2015/12/21 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python