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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
微信小程序后端实现授权登录
Feb 24 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
php4的彩蛋
2006/10/09 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python非递归全排列实现方法
2017/04/10 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
单位成立周年感言
2014/01/26 职场文书
纪检监察建议书
2014/05/19 职场文书
企业文化宣传标语
2014/06/09 职场文书
火箭队口号
2014/06/18 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
升学宴来宾致辞
2015/07/27 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs