JavaScript_javascript スキルに対する !DOCTYPE 宣言の影響の分析-jsチュートリアル-php.cn

JavaScript_javascript スキルに対する !DOCTYPE 宣言の影響の分析

WBOY

リリース： 2016-05-16 18:29:46

オリジナル

1155 人が閲覧しました

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

DOCTYPE声明如下：

DOCTYPE声明包括：过渡型（Transitional），严格型（Strict）和框架型（Frameset）。接下来就看一下这三种类型对不同浏览器在获取元素相关信息时的影响（包括不定义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で取得される値は最初のケースと同じです。

2. 厳格な

1. IE6.0、IE7.0、およびIE8.0の幅と高さ(幅、高さ)をテストします(非異常モードのQuirks)

オフセット幅、オフセット高さ

クライアント幅、クライアント高さ

currentStyle['width']、currentStyle['width']

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以外无此属性

スクロールバーの有無:
offsetWidth=
paddingLeft paddingRight borderLeft borderRight

offsetHeight=
paddingTop paddingBottom borderTop boderBottom

1. スクロールバーなし
clientWidth=widthpaddingLeftpaddingRightはCSSで定義されています

clientHeight=heightpaddingToppaddingBottomはCSSで定義されています
境界線の幅は含まれません

2スクロールバー
clientWidth=CSSで定義された幅-スクロールバーの幅(17固定値)-境界線の幅

clientHeight=CSSで定義された高さ-スクロールバーの幅(17固定値)-境界線の幅

パディングとボーダー値を除いた実際の実際の幅
(IE と Opera 以外にはそのような属性はありません)

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以外无此属性

オフセット左、オフセット上

clientLeft、clientTop

currentSytle['left']、currentStyle['top']

スクロールバーの有無:
offsetLeft=オブジェクトの左境界線のオフセット
offsetTop=実際の値

スクロールバーの有無: 境界線の幅

IE と Opera 以外にはそのような属性はありません

2. IE8.0 異常モード (Quirks) の幅と高さ (幅、高さ) をテストします

オフセット幅、オフセット高さ	クライアント幅、クライアント高さ	currentStyle['width']、currentStyle['height]
1. (スクロールバーなし) 幅 (高さ) = 現在のオブジェクトの実際の値 2. (スクロールバーあり) 幅 (高さ) = CSS で定義された値	1. (スクロールバーなし) 幅 (高さ) = 現在のオブジェクトの実際の値 2. (スクロールバーあり) 幅 (高さ) = 現在のオブジェクトの CSS で定義された値 - スクロールバー ( 17) - 境界線の幅	スクロールバーの有無: 幅と高さは CSS で定義された値です (IE と Opera を除き、そのような属性はありません)
オフセット左、オフセット上	clientLeft、clientTop	currentSytle['left']、currentStyle['top']
スクロールバーの有無: offsetLeft(offsetTop)=実際の値	スクロールバーの有無: 境界線の幅	IE と Opera 以外にはそのような属性はありません

3、FF、Opera、Safari、Chromで取得される値は最初のケースと同じです。 3. DOCTYPE ステートメントをキャンセルします 1. DOCTYPE 宣言がない場合、IE6.0 および IE7.0 は IE8.0 の異常モード (Quirks) と同じ厳密な結果になります。 2. FF、Safari、Chrome、IE8.0の標準モードは移行モードと同じです。 3. Opera ブラウザでは、要素にスクロールバーがない場合、offsetHeight と clientHeight の値は現在の実際のサイズに基づきます。 4. DOCTYPE ステートメントをに書き換えます。 1. DOCTYPE 宣言がない場合、IE6.0 および IE7.0 は IE8.0 の異常モード (Quirks) と同じ厳密な結果になります。 2. FF、Safari、Chrome、IE8.0の標準モードは移行モードと同じです。 3. Opera ブラウザでは、要素にスクロールバーがない場合、offsetHeight と clientHeight の値は現在の実際のサイズに基づきます。 Opera にも IE と同じ属性「currentStyle」があるため、currentStyle を使用して Opera の要素の正確な値を取得することもできます。