!DOCTYPE声明对JavaScript的影响分析

要建立符合标准的网页，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+borderRight

offsetHeight=
paddingTop+paddingBottom+borderTop+boderBottom

1、无滚动条
clientWidth=CSS中定义的宽度+paddingLeft+paddingRight

clientHeight=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+borderRight

offsetHeight=
paddingTop+paddingBottom+borderTop+boderBottom

1、无滚动条
clientWidth=CSS中定义的宽度+paddingLeft+paddingRight

clientHeight=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来取得元素的精确值。

赞 (0)

相关推荐

  • 指定网页的doctype解决CSS Hacking方法总结

    但是实际上,浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列. 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了.于是WD们拆东边补西边,终于能在几个浏览器下都正常了.结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,W

  • 第1天:选择什么样的DOCTYPE

    前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的.之前阿捷也一直没有制作过一个真正符合web标准的网站.现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助.好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. 查看本站首页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

  • doctype后如何获得body.clientHeight的方法

    在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值. 因为在加了doctype后,在ie6中这些document.body的属性已经重新分配给了document.documentElement. 比如:原来document.body.clientHeight,就要改成document

  • 网页中经常用到的Metas, Links and DocTypes集合

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR

  • HTML <!DOCTYPE> 标签

    在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页没有声明DOCTYPE,它就会以默认的DOCTYPE解释下面的HTML.在同 一种标准下,不同浏览器的解释模型都有所差异,如果声明标准不同,不用我说,您自己想就可以了.学习网页标准,浏览器兼容,从哪里开始您自己决定,但是, 请认识DOCTYPE: 一.什么是DOCTYPE DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本.要想制作符合标准的页面,一个必不

  • !DOCTYPE声明对JavaScript的影响分析

    要建立符合标准的网页,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"> DOCTYP

  • javascript 两种声明函数的方式的分析

    javascript 声明函数 JavaScript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码: /*方式一*/ var FUNCTION_NAME = function() { /* FUNCTION_BODY */}; /*方式二*/ function FUNCTION_NAME () { /* FUNCTION_BODY */}; 区别一 方式一的声明方式是先声明后使用 方式二的声明方式可以先调用,后声明 /*方式一: *

  • TypeScript与JavaScript的区别分析

    目录 TypeScript优势 TypeScript 与 JavaScript 的区别 TypeScript基本语法 TypeScript原始类型 1.字符串 2.数字 3.布尔值 4.Symbol原始类型 5.静态类型检测 TypeScript引用类型 1.数组 2.数组类型(Array) 3.元组类型(Tuple) 4. any 5. unknown 6. void.undefined.null 7. never 8. object 小结 TypeScript是微软开发的一个开源的编程语言,

  • mysql事务对效率的影响分析总结

    1.数据库事务会降低数据库的性能.为了保证数据的一致性和隔离性,事务需要锁定事务. 2.如果其他事务需要操作这部分数据,必须等待最后一个事务结束(提交,回滚). 实例 create table acct( acct_no varchar(32), acct_name varchar(32), balance decimal(16,2) ); insert into acct values ('0001','Jerry', 1000), ('0002','Tom', 2000); start tr

  • javascript函数声明和函数表达式区别分析

    javascript函数声明和函数表达式区别分析

    平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明. 函数声明 函数声明示例代码 复制代码 代码如下: function fn () {     console.log('fn 函数执行..');     // code.. } 这样我们就声明了一个

  • JS中用try catch对代码运行的性能影响分析

    前言 之前一直没有去研究try catch对代码运行的性能影响,只是一直停留在了感觉上,正好最近开会交流学习的时候,有人提出了相关的问题.借着周末,正好研究一番. 前端线上脚本错误的捕获方法: window.JSTracker=window.JSTracker||[]; try{ //your code }catch(e){ JSTracker.push(e); throwe;//建议将错误再次抛出,避免测试无法发现异常 } 设计实验方式 简单的设计方案也就是对比实验. 空白组1:[无 try

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • php中magic_quotes_gpc对unserialize的影响分析

    本文实例分析了php中magic_quotes_gpc对unserialize的影响.分享给大家供大家参考.具体如下: magic_quotes_gpc是一个php中一个给单双引号增加一些安全过滤的函数,但此函数对于我们使用unserialize函数时会产生一些影响,下面我们就这个问题与大家看几个实例与解决办法. 昨天朋友让我帮他解决下他网站的购物车程序的问题,程序用的是PHPCMS,换空间前是好的,刚换的空间,具体问题是提示成功加入购物车后跳转到购物车页面,购物车里为空. 我看了下代码,大致的

  • JavaScript计时器用法分析【setTimeout和clearTimeout】

    本文实例分析了JavaScript计时器用法.分享给大家供大家参考,具体如下: JavaScript中使用setTimeout和clearTimeout函数进行计时/停止计时的操作. 1.指定时间后执行一个动作,如3s后弹出一个对话框: setTimeout('alert("3s")',5000); 并且,该函数可以叠加起来是用,如: function delay_times(){ setTimeout('document.getElementById("time_text&

  • MySQL中字符串索引对update的影响分析

    本文分析了MySQL中字符串索引对update的影响.分享给大家供大家参考,具体如下: 对某一个类型为varchar的字段添加前缀索引后,基于该子段的条件查询时间基本大幅下降:但对于update操作,所耗的时间却急剧上升,主要原因是在更新数据的同时,mysql会执行索引的更新. 下面做了一个简单的试验. (1)首先对某个亿级记录的表字段所有记录执行更新: for idx in range(1, count+1): sql = "update tbl_name set platforms='&qu

随机推荐