JavaScript Web positioning detailed _javascript Tips

Web page Visible area width: document.body.clientWidth
Page Visible Area High: Document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
height of visible area of Web page: Document.body.offsetHeight (including edge width)
Web page body Full text width: document.body.scrollWidth
The full text of the page: Document.body.scrollHeight
The height of the page is rolled: Document.body.scrollTop
Pages are rolled left: Document.body.scrollLeft
Page body section: Window.screentop
Page body section left: Window.screenleft
High screen resolution: Window.screen.height
Screen resolution width: window.screen.width
Screen available workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

HTML Precise positioning: Scrollleft,scrollwidth,clientwidth,offsetwidth
ScrollHeight: Gets the scrolling height of the object.
ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost part of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate offsetparent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx the horizontal coordinates of the relative document
Event.clienty vertical coordinates relative to document
The horizontal coordinates of the event.offsetx relative to the container
The vertical coordinates of the event.offsety relative to the container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling amount

Ie,firefox differences 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

(Need to mention: CSS in the margin attribute, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

=====================================================

Yesterday to some of the items in the page replaced the layout, after the replacement found some JS bad. The width of the page is 0 by document.documentElement.clientWidth such statements. After Google, it is known that the new page is missing a reference to the standards of the consortium, resulting in document.documentElement.clientWidth failure:

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

If you add this line of markup to the page

In IE:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

in Firefox :
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

In Opera:
Document.body.clientWidth ==> Visible Area width
Document.body.clientHeight ==> Visible Area height
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width)
Document.documentElement.clientHeight ==> Page Object height (that is, height of the body object plus margin high)
If the standard of the consortium is not defined, the

IE is:
document.documentElement.clientWidth ==> 0
Document.documentElement.clientHeight ==> 0

Firefox is:
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight = = > Page Object height (that is, the body object height plus margin high)

Opera is:
Document.documentElement.clientWidth ==> The Page object width (that is, the body object width plus margin width) document.documentElement.clientHeight The ==> Page object height (that is, the body object height plus margin high)