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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
使用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将session放入memcached的设置方法
2014/02/14 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jQuery制作拼图小游戏
2015/01/12 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python 获取div标签中的文字实例
2018/12/20 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
承诺书样本
2014/08/30 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年度考核工作总结
2014/12/24 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
政府会议通知范文
2015/04/15 职场文书
家长意见书
2015/06/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
Python天气语音播报小助手
2021/09/25 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS