JavaScript web page location details

Page visible region wide: document. Body. ClientWidth
High page visible area: the document. The body. ClientHeight
Page visible region wide: document. Body. OffsetWidth (including line width)
High page visible area: the document. The body. OffsetHeight (including line width)
Page of text in full width: document. Body. ScrollWidth
High page of text in full: document. Body. ScrollHeight
Web pages are scroll high: document.body.scrolltop
Page is scroll to the left: document.body.scrollleft
In the body of the page: window.screentop
Page body left: window.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: 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 distance between the left edge of the object and the leftmost end of the currently visible content in the window
ScrollTop: sets or gets the distance between the top of the object and the top 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 the parent coordinate specified by the parent offsetParent property
OffsetLeft: gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute
OffsetTop: gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
Event.clientx horizontal coordinates relative to the document
The vertical coordinates of event.clienty relative to the document
The horizontal coordinates of event.offsetx relative to the container
The vertical coordinates of event.offsety relative to the container
Document. The documentElement. ScrollTop vertical scrolling
Event. ClientX + document. DocumentElement. ScrollTop relative document of the amount of horizontal coordinate + vertical scrolling

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

(note: margin property in CSS, independent of clientWidth, offsetWidth, clientHeight, offsetHeight)

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

Yesterday, I changed the layout of some pages in the project. After the change, I found that some js was not working well. Through the document. The documentElement. ClientWidth page width of 0 such statements. After a Google, just know is a new page without a reference of the W3C standards, leading to the document. The documentElement. ClientWidth failure:

< ! PUBLIC DOCTYPE HTML "- / / / / 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. The documentElement. ClientWidth = = > Visible area width
Document. The documentElement. ClientHeight = = > Height of visible area

In FireFox :
Document. Body. ClientWidth = = > BODY object width
Document. Body. ClientHeight = = > BODY object height
Document. The documentElement. ClientWidth = = > Visible area width
Document. The documentElement. ClientHeight = = > Height of visible area

In the Opera:
Document. Body. ClientWidth = = > Visible area width
Document. Body. ClientHeight = = > Height of visible area
Document. The documentElement. ClientWidth = = > Page object width (that is, BODY object width plus Margin width)
Document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)
If no W3C standard is defined, then

IE is:
Document. The documentElement. ClientWidth = = > 0
Document. The documentElement. ClientHeight = = > 0

FireFox is:
Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

The Opera is:
Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)