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 web对话框与弹出窗口
Feb 22 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python中模块的__all__属性详解
2017/10/26 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python实现局域网内实时通信代码
2019/12/22 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
党支部活动策划方案
2014/08/18 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python