JS access to the basic information browser Basics _

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)

－－－－－－－－－－－－－－－－－－－

Technical points

This section of code mainly uses some of the properties of the document object with regard to the window, the main features and usage of these properties are as follows.

To get the size of the window, for different browsers, you need to use different properties and methods: To detect the real size of the window, you need to use the properties of Windows under Netscape; in IE, you need to go deep inside the document to detect the body; In a DOM environment, To get the size of the window, you need to be aware of the size of the root element, not the element.

The Innerwidth property of the Window object contains the internal width of the current windows. The Innerheight property of the Window object contains the internal height of the current windows.

The Body property of the Document object corresponds to the label of the HTML document. The DocumentElement property of the Document object represents the root node of the HTML document.

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

A little research on getting the size of the visible windows of various browsers.

In my local test: in IE, FireFox, opera can be used under

Document.body.clientWidth

Document.body.clientHeight can be obtained, very simple, very convenient.

And in the company project: Opera still use

Document.body.clientWidth

Document.body.clientHeight

But IE and Firefox use

Document.documentElement.clientWidth

Document.documentElement.clientHeight

It's the standard of the 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 = = > Height of the Page object (that is, the height of the body object plus margin high)

And if there is no standard for the definition of the consortium,

Then IE is: document.documentElement.clientWidth ==> 0

Document.documentElement.clientHeight ==> 0

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

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

Opera is: Document.documentElement.clientWidth ==> Page Object width (that is, body object width plus margin width)

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

is really a troublesome thing, in fact, in front of the design and development, rather fewer objects and methods, do not use the latest standards to facilitate many AH. But can not keep up with the trend will never be a senior designer, so this knowledge we still have to understand and master.