! Impact of DOCTYPE Declaration on JavaScript

The DOCTYPE Declaration is an essential part of building a standard web page. Your logo and CSS will not take effect unless your XHTML determines a correct DOCTYPE; of course, JS values will also be affected.

DOCTYPE Declaration: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE statements include Transitional, Strict, and Frameset ). Next, let's take a look at the impact of these three types on different browsers when obtaining element-related information (including not defining DOCTYPE and defining only DOCTYPE as <! DocType> Format). The tested browsers are IE6.0, IE7.0, IE8.0 (abnormal mode), FF, Opera, Chrome, and Safari. IE5.5 is almost out of the test scope.

The following is the test result (the scroll bar is only the scroll bar of the element itself, not the window ):

1. Transitional)

1. Test the width and height (width, height) of IE6.0, IE7.0, and IE8.0 (non-abnormal mode Quirks)

OffsetWidth, offsetHeight	ClientWidth, clientHeight	CurrentStyle ['width'], currentStyle ['width']
With or without a scroll bar: OffsetWidth = PaddingLeft + paddingRight + borderLeft + borderRight OffsetHeight = PaddingTop + paddingBottom + borderTop + boderBottom	1. No scroll bar ClientWidth = width defined in CSS + paddingLeft + paddingRight ClientHeight = height defined in CSS + paddingTop + paddingBottom (Border width is not included) 2. scroll bar ClientWidth = width defined in CSS-scroll bar width (fixed value 17)-Border width, ClientHeight = height defined in CSS-scroll bar width (17 fixed values)-Border Width	Actual width, excluding the padding and border values (Except IE and Opera)
OffsetLeft, offsetTop	ClientLeft, clientTop	CurrentSytle ['left'], currentStyle ['top']
With or without a scroll bar: OffsetLeft = The offsetLeft-border of the object OffsetTop = actual value	With or without a scroll bar: Border Width	This attribute is not available except IE and Opera.

2. Test the width and height (width, height) of IE8.0 abnormal mode (Quirks)

OffsetWidth, offsetHeight	ClientWidth, clientHeight	CurrentStyle ['width'], currentStyle ['height]
1. (No scroll bar) width (height) = actual value of the current object 2. (with a scroll bar) width (height) = value defined in CSS	1. (No scroll bar) width (height) = actual value of the current object 2. (with a scroll bar) width (height) = value defined by the current object in CSS-scroll bar (17)	With or without a scroll bar: Both width and height are values defined in CSS.
OffsetLeft, offsetTop	ClientLeft, clientTop	CurrentSytle ['left'], currentStyle ['top']
With or without a scroll bar: OffsetLeft (offsetTop) = actual value	With or without a scroll bar: Border Width	This attribute is not available except IE and Opera.

3. The values in FF, Opera, Safari, and Chrom are the same as those in the first case.

Ii. Strict)

1. Test the width and height (width, height) of IE6.0, IE7.0, and IE8.0 (non-abnormal mode Quirks)

OffsetWidth, offsetHeight	ClientWidth, clientHeight	CurrentStyle ['width'], currentStyle ['width']
With or without a scroll bar: OffsetWidth = PaddingLeft + paddingRight + borderLeft + borderRight OffsetHeight = PaddingTop + paddingBottom + borderTop + boderBottom	1. No scroll bar ClientWidth = width defined in CSS + paddingLeft + paddingRight ClientHeight = height defined in CSS + paddingTop + paddingBottom Border width not included 2. scroll bar ClientWidth = width defined in CSS-scroll bar width (fixed value 17)-Border width, ClientHeight = height defined in CSS-scroll bar width (17 fixed values)-Border Width	Actual width, excluding the padding and border values (Except IE and Opera)
OffsetLeft, offsetTop	ClientLeft, clientTop	CurrentSytle ['left'], currentStyle ['top']
With or without a scroll bar: OffsetLeft = The offsetLeft-border of the object OffsetTop = actual value	With or without a scroll bar: Border Width	This attribute is not available except IE and Opera.

2. Test the width and height (width, height) of IE8.0 abnormal mode (Quirks)

OffsetWidth, offsetHeight	ClientWidth, clientHeight	CurrentStyle ['width'], currentStyle ['height]
1. (No scroll bar) width (height) = actual value of the current object 2. (with a scroll bar) width (height) = value defined in CSS	1. (No scroll bar) width (height) = actual value of the current object 2. (with a scroll bar) width (height) = value defined by the current object in CSS-scroll bar (17)-Border Width	With or without a scroll bar: Both width and height are values defined in CSS. (Except IE and Opera)
OffsetLeft, offsetTop	ClientLeft, clientTop	CurrentSytle ['left'], currentStyle ['top']
With or without a scroll bar: OffsetLeft (offsetTop) = actual value	With or without a scroll bar: Border Width	This attribute is not available except IE and Opera.

3. The values in FF, Opera, Safari, and Chrom are the same as those in the first case.

3. Cancel DOCTYPE Declaration

1. When IE6.0 and IE7.0 do not have a DOCTYPE Declaration, they are strictly the same as the normal mode (Quirks) in IE8.0.

2. The standard FF, Safari, Chrome, and IE8.0 modes are the same as transition results.

3. In Opera browser, when the element does not have a scroll bar, the value of offsetHeight and clientHeight is the actual size.

4. Rewrite the DOCTYPE declaration to <! DocType>

1. When IE6.0 and IE7.0 do not have a DOCTYPE Declaration, they are strictly the same as the normal mode (Quirks) in IE8.0.

2. The standard FF, Safari, Chrome, and IE8.0 modes are the same as transition results.

3. In Opera browser, when the element does not have a scroll bar, the value of offsetHeight and clientHeight is the actual size.

Opera also has the same attribute "currentStyle" as IE, so you can also use currentStyle in Opera to get the exact value of the element.