由document.body和document.documentElement想到的


Posted in Javascript onApril 13, 2009

对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在不声明Doctype的情况下,浏览器默认是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位,否则它不会认。既然已经说道了这,再展开一下。对于火狐:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式(即使在css中设定也不行),则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
再说说他们的区别吧:
下面这段大家可能都见到过,在网上被转载过很多次,在这我也借用一下:
.Kfk428 { display:none; }
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
由document.body和document.documentElement想到的
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

在设置了文档类型后也可能有差异,以上仅供参考

Javascript 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 #Javascript
javascript removeChild 使用注意事项
Apr 11 #Javascript
Firefox window.close()的使用注意事项
Apr 11 #Javascript
javascript html 静态页面传参数
Apr 10 #Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 #Javascript
javascript 原型模式实现OOP的再研究
Apr 09 #Javascript
javascript 鼠标滚轮事件
Apr 09 #Javascript
You might like
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php5.3 注意事项说明
2013/07/01 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
详解php命令注入攻击
2019/04/06 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python 实现向word(docx)中输出
2020/02/13 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
成绩单家长评语大全
2014/04/16 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
任命书格式范文
2015/09/22 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server