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随机生成网页背景颜色的方法
Feb 26 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
JS三级联动代码格式实例详解
Dec 30 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
js 通用订单代码
2013/12/23 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
easyui validatebox验证
2016/04/29 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python取代netcat过程分析
2018/02/10 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python的UTC时间转换讲解
2019/02/26 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
毕业自荐信
2013/12/16 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
离婚协议书的范本
2015/01/27 职场文书
开场白怎么写
2015/06/01 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
关于python类SortedList详解
2021/09/04 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS