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)