由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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
处理canvas绘制图片模糊问题
May 11 Javascript
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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
Vue动态创建注册component的实例代码
2019/06/14 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Python类的基础入门知识
2008/11/24 Python
python中lambda()的用法
2017/11/16 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
安全员岗位职责
2013/11/11 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
Python List remove()实例用法详解
2021/08/02 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript