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 面向对象继承
Nov 26 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
javascript实现移动端上传图片功能
Aug 18 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
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python人人网登录应用实例
2014/09/26 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
树莓派实现移动拍照
2019/06/22 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
自我鉴定四大框架
2014/01/17 职场文书
中学教师培训制度
2014/01/31 职场文书
小班秋游活动方案
2014/02/22 职场文书
开展读书活动总结
2014/06/30 职场文书
会计专业自荐书
2014/07/08 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
《观察物体》教学反思
2016/02/17 职场文书
聘任书的格式及模板
2019/10/28 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python