!DOCTYPE声明对JavaScript的影响分析


Posted in Javascript onApril 12, 2010

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效;当然对JS的取值也会有影响。

DOCTYPE声明如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE声明包括:过渡型(Transitional),严格型(Strict)和框架型(Frameset)。接下来就看一下这三种类型对不同浏览器在获取元素相关信息时的影响(包括不定义DOCTYPE和只将DOCTYPE定义为<!docType>形式),我测试的浏览器分别为:IE6.0、IE7.0、IE8.0(变态模式)、FF、Opera、Chrome和Safari。由于IE5.5已经几乎被淘汰,所以不在测试范围之内。

以下就是测试结果(滚动条只是元素本身的滚动条并不是窗口的):

一、过渡型(Transitional)

1、测试IE6.0、IE7.0与IE8.0(非变态模式Quirks)的宽度和高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘width']
有无滚动条均为:offsetWidth=paddingLeft+paddingRight+borderLeft+borderRightoffsetHeight=paddingTop+paddingBottom+borderTop+boderBottom 1、无滚动条clientWidth=CSS中定义的宽度+paddingLeft+paddingRightclientHeight=CSS中定义的高度+paddingTop+paddingBottom(均不包括边框宽度)2、有滚动条clientWidth=CSS中定义的宽度-滚动条宽度(17固定值)-边框宽度,clientHeight=CSS中定义的高度-滚动条宽度(17固定值)-边框宽度 实际真实宽度,不包括padding与边框值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为:offsetLeft=对象的offsetLeft-边框offsetTop=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘height]
1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=CSS中定义的数值 1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=当前对象在CSS中定义的数值-滚动条(17) 有无滚动条均为:宽度和高度均为CSS中定义的数值
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为: offsetLeft(offsetTop)=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

二、严格型(Strict)

1、测试IE6.0、IE7.0与IE8.0(非变态模式Quirks)的宽度和高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘width']
有无滚动条均为:offsetWidth=paddingLeft+paddingRight+borderLeft+borderRightoffsetHeight=paddingTop+paddingBottom+borderTop+boderBottom 1、无滚动条clientWidth=CSS中定义的宽度+paddingLeft+paddingRightclientHeight=CSS中定义的高度+paddingTop+paddingBottom均不包括边框宽度2、有滚动条clientWidth=CSS中定义的宽度-滚动条宽度(17固定值)-边框宽度,clientHeight=CSS中定义的高度-滚动条宽度(17固定值)-边框宽度 实际真实宽度,不包括padding与边框值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为:offsetLeft=对象的offsetLeft-边框offsetTop=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘height]
1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=CSS中定义的数值 1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=当前对象在CSS中定义的数值-滚动条(17)-边框宽度 有无滚动条均为:宽度和高度均为CSS中定义的数值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为: offsetLeft(offsetTop)=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

三、取消DOCTYPE声明

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式(Quirks)中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中,在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

四、将DOCTYPE声明改写为<!docType>

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式(Quirks)中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中,在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

在Opera中也拥有与IE一样的属性“currentStyle”,所以在Opera中也可以使用currentStyle来取得元素的精确值。

Javascript 相关文章推荐
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
webpack4.0 入门实践教程
Oct 08 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 #Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 #Javascript
javascript cookies操作集合
Apr 12 #Javascript
javascript 数组学习资料收集
Apr 11 #Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 #Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 #Javascript
javascript dom 基本操作小结
Apr 11 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
Flask数据库迁移简单介绍
2017/10/24 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python列表的逆序遍历实现
2020/04/20 Python
pandas数据处理之绘图的实现
2020/06/15 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
销售代表求职自荐信
2013/10/01 职场文书
单位门卫岗位职责
2013/12/20 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书