由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 flash激活
Oct 19 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JavaScript实现计数器基础方法
Oct 10 Javascript
一文快速了解JQuery中的AJAX
May 31 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
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python3注册全局热键的实现
2020/03/22 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
.net笔试题
2014/03/03 面试题
十一个高级MySql面试题
2014/10/06 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
基层工作经历证明
2014/01/13 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
考核评语大全
2014/04/29 职场文书
小学教师师德承诺书
2014/05/23 职场文书
学术会议领导致辞
2015/07/29 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python中22个万用公式的小结
2021/07/21 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫