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 相关文章推荐
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
使用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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Js中sort()方法的用法
2006/11/04 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
js实现五星评价功能
2017/03/08 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python实现的计算器功能示例
2018/04/26 Python
Python中的heapq模块源码详析
2019/01/08 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
2014庆六一活动方案
2014/03/02 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2014年终个人总结报告
2015/03/09 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
谢师宴家长答谢词
2015/09/30 职场文书