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 arguments.callee的应用代码
May 07 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
结合axios对项目中的api请求进行封装操作
Sep 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue二级路由设置方法
2018/02/09 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python素数检测实例分析
2015/06/15 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python requests post多层字典的方法
2018/12/27 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
施工人员岗位职责
2013/12/12 职场文书
全陪导游欢迎词
2014/01/17 职场文书
和解协议书
2014/04/16 职场文书
公开承诺书格式
2014/05/21 职场文书
幼儿老师求职信
2014/06/30 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
Sql Server之数据类型详解
2022/02/28 SQL Server