HTML document type

Added online test results yesterday! After opening the JS pop-up box, the position and effect are incorrect! But I can test it locally! After careful check, I found that the type of the HTML document in the blog garden is different from that in mine.

Mine is:<! Doctype HTML>

Blog:<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">

For HTML document type reference: http:// I .wanz.im/2010/05/28/why_doctype_html/

Check and find that JS obtains the visible size of the current page, which is different from the scrolling position of the page!

The DIV containing a 2000*2000 on the page is IE and chrome. The following figure shows the data for testing different HTML document types:

Standard: <! Doctype HTML>

Special: <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">

When no HTML document type is added to HTML, the default mode is special!

	Chrome Standard	Chrome special	IE Standard	IE special
Document. Body. clienttop;	0	0	0	2
Document. Body. clientleft;	0	0	0	2
Document. Body. clientwidth;	473	473	471	471
Document. Body. clientheight;	2000	625	2000	604
Document. Body. scrolltop;	224	289	0	255
Document. Body. scrollleft;	315	388	0	278
Document. Body. scrollwidth;	2005	2005	2005	2010
Document. Body. scrollheight;	2010	2010	2000	2005
Document. Body. offsettop;	0	0	0	0
Document. Body. offsetleft;	0	0	0	0
Document. Body. offsetwidth;	473	473	471	492
Document. Body. offsetheight;	2000	2000	2000	625
Document.doc umentelement. clienttop;	0	0	0	0
Document.doc umentelement. clientleft;	0	0	0	0
Document.doc umentelement. clientwidth;	473	473	471	0
Document.doc umentelement. clientheight;	625	2010	604	0
Document.doc umentelement. scrolltop;	0	0	199	0
Document.doc umentelement. scrollleft;	0	0	241	0
Document.doc umentelement. scrollwidth;	2005	2005	2005	492
Document.doc umentelement. scrollheight;	2010	2010	2010	625
Document.doc umentelement. offsettop;	0	0	0	0
Document.doc umentelement. offsetleft;	0	0	0	0
Document.doc umentelement. offsetwidth;	473	473	492	492
Document.doc umentelement. offsetheight;	2010	2010	625	625

Analysis:

Total page width: Document. Body. scrollwidth;

Total page height: Document. Body. scrollheight;

Chrome page location: Document. Body. scrolltop; document. Body. scrollleft;

Visible area of the chrome standard page: document.doc umentelement. clientwidth; document.doc umentelement. clientheight;

Visible area of chrome special pages: Document. Body. clientwidth; document. Body. clientheight;

Standard ie page location: document.doc umentelement. scrolltop; document.doc umentelement. scrollleft;

Visible area of the IE standard page: document.doc umentelement. clientwidth; document.doc umentelement. clientheight;

IE special page location: Document. Body. scrolltop; document. Body. scrollleft;

Visible area of special ie pages: Document. Body. clientwidth; document. Body. clientheight;

JSCodeAs follows:

Function getsize () {var OBJ = new object (); obj. allwidth = document. body. scrollwidth; obj. allheight = document. body. scrollheight; If (-[1,]) {// non-ieobj. top = document. body. scrolltop; obj. left = document. body. scrollleft; If (document. compatmode = 'css1compat') {obj. width = document.doc umentelement. clientwidth; obj. height = document.doc umentelement. clientheight;} else {obj. width = document. body. clientwidth; obj. height = document. body. clientheight;} else {If (document. compatmode = 'css1compat') {obj. width = document.doc umentelement. clientwidth; obj. height = document.doc umentelement. clientheight; obj. top = document.doc umentelement. scrolltop; obj. left = document.doc umentelement. scrollleft;} else {obj. width = document. body. clientwidth; obj. height = document. body. clientheight; obj. top = document. body. scrolltop; obj. left = document. body. scrollleft ;}} alert (obj. top); alert (obj. left); alert (obj. width); alert (obj. height); Return OBJ ;}
 

Note: The type of HTML document on the blog homepage is:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why is it different from the casual display page?