The impact of DOCTYPE Declaration on JS window width and height acquisition

Without the DOCTYPE declaration:

Document. body. clientWidth

Document. body. clientHeight

It is the width/height of the current window;

After DOCTYPE Declaration

Document. body. clientWidth

Document. body. clientHeight

The width/height of the entire page;

Document.doc umentElement. clientWidth

Document.doc umentElement. clientHeight

It is the width/height of the current window;

After adding the DOCTYPE declaration

Document. body. scrollLeft

Document. body. scrollTop

To change

Document.doc umentElement. scrollLeft

Document.doc umentElement. scrollTop

Note that when saving the file, the file encoding should be optimistic. Sometimes a script error occurs because of the encoding format problems, such as GB2312.

------------------------------------------------------------------

The fixed layer location may be frequently used during page design. In this case, you need to obtain the coordinates of Some html objects to set the coordinates of the Target layer more flexibly. document may be used here. body. scrollTop and other attributes, but this attribute is included in the xhtml standard webpage or, more simply, with <! DOCTYPE...> the result on the tab page is 0. If this label is not used, everything is normal. How can we obtain the body coordinate on the xhtml page? Of course, there is a way to replace document with document.doc umentElement. body, which can be written in this way
Example:
Var top = document.doc umentElement. scrollTop | document. body. scrollTop;
| In javascript is a good thing. Besides being able to be judged by conditions such as if, it can also be used to assign values to variables. The preceding example is equivalent to the following example.
Example:
Var top = document.doc umentElement. scrollTop? Document.doc umentElement. scrollTop: document. body. scrollTop;
This write can be well compatible.

---------------------------------------------------
JS: Get the browser window. Obtain the screen, browser, and webpage height and width.

Visible area width of the webpage: document. body. clientWidth
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Partial webpage text: window. screenTop
Page text left: window. screenLeft
High screen identification rate: window. screen. height
Screen discrimination rate width: window. screen. width
Screen available labor Zone Height: window. screen. availHeight
Available working area width: window. screen. availWidth

Precise HTML positioning: scrollLeft, scrollWidth, clientWidth, and offsetWidth
ScrollHeight: gets the scroll height of an object.
ScrollLeft: sets or obtains the distance between the left-side boundary of East-West and the leftmost side of the currently visible content in the window.
ScrollTop: sets or obtains the distance between the top of the things and the top of the visible content in the window.
ScrollWidth: gets the scroll width of an item.
OffsetHeight: gets the height of the parent coordinate specified by the parent coordinate offsetParent attribute.
OffsetLeft: obtains the left-side location of the layout for processing objects or the parent coordinate specified by the offsetParent attribute.
OffsetTop: gets the top position of the parent coordinate calculation specified by the offsetTop attribute.
The horizontal coordinates of event. clientX relative to the document
The straight coordinate of event. clientY relative to the document
Horizontal coordinates of event. offsetx relative to the container
The straight coordinate of event. offsety relative to the container
Document.doc umentelement. scrolltop: scroll-oriented value
Event. clientx document.doc umentelement. The amount of horizontal coordinates of scrolltop relative to the document in a straight direction to scroll

The differences between IE and Firefox are as follows:

Ie6.0, ff1.06:

Clientwidth = width padding

Clientheight = height padding

Offsetwidth = width padding border

Offsetheight = height padding border

Ie5.0/5.5:
Clientwidth = width-border

Clientheight = height-border

Offsetwidth = width

Offsetheight = height

(The margin attribute in CSS is independent of clientwidth, offsetwidth, clientheight, and offsetheight)

Visible area width of the webpage: Document. Body. clientwidth
Visible area height: Document. Body. clientheight
Visible area width of the webpage: Document. Body. offsetwidth (including the width of the edge)
Visible area height of the webpage: Document. Body. offsetheight (including the height of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Partial webpage text: window. screenTop
Page text left: window. screenLeft
High screen identification rate: window. screen. height
Screen discrimination rate width: window. screen. width
Screen available labor Zone Height: window. screen. availHeight
Available working area width: window. screen. availWidth

-------------------

Technical Points
In this section, the source code mainly uses some properties of the Document about the window. The main utility and usage of these properties are as follows.

To get the Window size and deal with different browsers, use the properties and essentials of the difference: To detect the real size of the Window, use the properties of the Window in Netscape; in IE, you need to go deep into the Document to check the body. In DOM, to get the size of the window, you need to pay attention to the size of the root element, instead of the element.

The innerWidth attribute of a Window includes the internal width of the current Window. The innerHeight attribute of a Window includes the internal height of the current Window.

The body attribute of a Document corresponds to the tag of an HTML Document. The documentElement attribute of Document reflects the root node of the HTML Document.

Document. Body. clientheight indicates the current height of the window where the HTML document is located. Document. Body. clientwidth indicates the current width of the window where the HTML document is located.

Implementation source code

<! ---------------------------- File name: 30.3.htm --------------------------------> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> & Document.doc umentelement. clientheight & document.doc umentelement. clientwidth) {winheight = document.doc umentelement. clientheight; winwidth = document.doc umentelement. clientwidth;} // The result is output to two text boxes, document. form1.availheight. value = winheight; document. form1.availwidth. value = winwidth;} finddimensions (); // use the function to obtain the value window. onresize = finddimensions; // --> </SCRIPT> </body> Source program explanation

(1) The program first creates a form, including two text boxes, used to display the current width and height of the window, and the value will change with the size of the window.

(2) In the subsequent JavaScript source code, first defines the two variables winwidth and winheight, for retaining the window height and width value.

(3) then, in finddimensions (), use window. innerheight and window. innerwidth to get the height and width of the window, and keep the two in the preceding two variables.

(4) then, go deep into the document to check the body, obtain the size of the window, and store it in the preceding two variables.

(5) At the end of the function, Access Table Elements by name and output the results to two text boxes.

(6) at the end of the JavaScript source code, the findDimensions () function is used to complete the entire operation.