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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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 选项及相关信息函数库
2006/12/04 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
python中global与nonlocal比较
2014/11/21 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
网站推广策划方案
2014/06/04 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
银行求职信模板
2015/03/20 职场文书
保研专家推荐信范文
2015/03/25 职场文书
催款通知书范文
2015/04/17 职场文书