! DOCTYPE statement on JavaScript impact analysis _javascript skills

To create compliant web pages, the DOCTYPE declaration is an essential component; Unless your XHTML determines a correct DOCTYPE, your logo and CSS will not work, and the value of JS can also be affected.

DOCTYPE declared as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

DOCTYPE declarations include: Transition type (transitional), rigid (Strict) and frame (Frameset). Next, take a look at the impact of these three types on the acquisition of element-related information by different browsers (including undefined docType and only docType defined as <!docType>), the browsers I tested were: IE6.0, IE7.0, IE8.0 (abnormal mode), FF, Opera, Chrome and Safari. Since the IE5.5 has been almost eliminated, it is not within the scope of the test.

Here is the test result (the scroll bar is not the window for the scroll bar of the element itself):

One, transition type (transitional)

1, Test IE6.0, IE7.0 and IE8.0 (non-normal mode quirks) width and height (width,height)

Offsetwidth,offsetheight	Clientwidth,clientheight	currentstyle[' width '],currentstyle[' width ']
There are no scroll bars are: Offsetwidth= Paddingleft+paddingright+borderleft+borderright offsetheight= Paddingtop+paddingbottom+bordertop+boderbottom	1, no scroll bar Width defined in clientwidth=css +paddingleft+paddingright The height defined in clientheight=css +paddingtop+paddingbottom (none of the border widths are included) 2, has the scroll bar Width defined in clientwidth=css-scroll bar width (17 fixed value)-border width, Height defined in clientheight=css-scroll bar width (17 fixed value)-border width	Actual true width, excluding padding and border values (no this attribute except IE and opera)
Offsetleft,offsettop	Clientleft,clienttop	Currentsytle[' left '],currentstyle[' top ']
There are no scroll bars are: offsetleft-border of the Offsetleft= object offsettop= actual value	Any scroll bars are: width of the border	No this attribute except IE and opera

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

1, (no scroll bar) width (height) = actual value of current object
2, (with scroll bar) width (height) = value defined by current object in CSS-scroll bar (a)

offsetwidth,offsetheight	clientwidth,clientheight	currentstyle[' width '],currentstyle[' height]
1, (no scroll bar) width (height) = actual value of current object 2, (with scroll bar) width (height) =css values defined in	There are no scroll bars: Width and height are values defined in CSS
offsetleft,offsettop< /td>	clientleft,clienttop	currentsytle[' left ' ],currentstyle[' top '
have scroll bars all: Offsetleft (offsettop) = actual value	has no scroll bars: the width of the border	No this property except IE and opera

3, FF, Opera, Safari and Chrom in the same number as the first case.

second, strict type (Strict)

1, Test IE6.0, IE7.0 and IE8.0 (non-normal mode quirks) width and height (width,height)

Offsetwidth,offsetheight	Clientwidth,clientheight	currentstyle[' width '],currentstyle[' width ']
There are no scroll bars are: Offsetwidth= Paddingleft+paddingright+borderleft+borderright offsetheight= Paddingtop+paddingbottom+bordertop+boderbottom	1, no scroll bar Width defined in clientwidth=css +paddingleft+paddingright The height defined in clientheight=css +paddingtop+paddingbottom None of the border widths are included 2, has the scroll bar Width defined in clientwidth=css-scroll bar width (17 fixed value)-border width, Height defined in clientheight=css-scroll bar width (17 fixed value)-border width	Actual true width, excluding padding and border values (no this attribute except IE and opera)
Offsetleft,offsettop	Clientleft,clienttop	Currentsytle[' left '],currentstyle[' top ']
There are no scroll bars are: offsetleft-border of the Offsetleft= object offsettop= actual value	Any scroll bars are: width of the border	No this attribute except IE and opera

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

have scroll bars for:

Offsetleft (offsettop) = actual value

offset Width,offsetheight

clientwidth,clientheight	currentstyle[' width ' ],currentstyle[' height]
1, (no scroll bar) width (height) = actual value of current object 2, (with scroll bar) width (height Values defined in =css	1, (no scroll bars) width (height) = current object's actual value 2, (with scroll bar) width (height) = value defined by current object in CSS-scroll bar (17)-Border width	There is no scroll bar is: Width and height are all defined in the CSS value (except IE and opera without this attribute)
offsetleft,offsettop	clientleft,clienttop	currentsytle[' left '],currentstyle[' top ']
Have scroll bars all: Width of border	No this attribute except IE and opera /p>

3, FF, Opera, Safari and Chrom in the same number as the first case.

Iii. cancellation of DOCTYPE declaration

1, IE6.0, IE7.0 in the absence of DOCTYPE declaration and IE8.0 in the normal mode (Quirks) in the same strict results.

2, FF, Safari, Chrome and IE8.0 standard mode is the same as the transition type results.

3, Opera browser, when the element has no scroll bar offsetheight and clientheight value is in its current reality size.

Iv. rewrite the DocType declaration to <!docType>

1, IE6.0, IE7.0 in the absence of DOCTYPE declaration and IE8.0 in the normal mode (Quirks) in the same strict results.

2, FF, Safari, Chrome and IE8.0 standard mode is the same as the transition type results.

3, Opera browser, when the element has no scroll bar offsetheight and clientheight value is in its current reality size.

In opera also has the same property as IE "Currentstyle", so in opera can also use Currentstyle to get the exact value of the element.