Js access to basic browser information

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)

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

The main technical points

The code in this section mainly USES some properties of the Document object about the window. The main functions and usage of these properties are as follows.

To get the size of the Window, you need to use different properties and methods for different browsers: to detect the real size of the Window, you need to use the properties of the Window under Netscape; Under IE, we need to go deep into the Document to detect the body. In the DOM environment, to get the size of the window, you need to pay attention to the size of the root element, not the element.

The innerWidth property of the Window object contains the innerWidth of the current Window. The innerHeight attribute of the Window object contains the innerHeight of the current Window.

The body attribute of the Document object corresponds to the tag of the HTML Document. The documentElement attribute of the Document object represents the root node of the HTML Document.

Document. Body. ClientHeight said HTML document in the current height of the window. Document.body.clientwidth represents the current width of the window in which the HTML document resides.

A little bit of research on getting the size of visible Windows in various browsers.

In my local test: it works with IE, FireFox, and Opera

Document. Body. ClientWidth

Document. Body. ClientHeight can obtain, is very simple, very convenient.

And in the company project: Opera still USES it

Document. Body. ClientWidth

Document. Body. ClientHeight

Internet explorer and FireFox do

Document. The documentElement. ClientWidth

Document. The documentElement. ClientHeight

Turned out to be the W3C standards at work (link: 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: the document body. ClientWidth = = > Visible area width

Document. Body. ClientHeight = = > Height of visible area

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)

If no W3C standards are defined,

IE for that document. The documentElement. ClientWidth = = > 0

Document. The documentElement. ClientHeight = = > 0

FireFox is: the 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)

The Opera is: the 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)

It is really a troublesome thing, in fact, in terms of front-end design and development, would rather have fewer objects and methods, do not use the latest standards to be a lot more convenient ah. But we can never be a senior designer if we can't keep up with the trend, so we still have to understand and master these knowledge.