Javascript window width and height, mouse position, scroll height (detailed analysis) _ basic knowledge

Javascript window width and height, mouse position, scroll height (detailed analysis ). For more information, see document. body. clientWidth.
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Page body: window. screenTop
Page body part left: window. screenLeft
Screen Resolution height: window. screen. height
Screen Resolution width: window. screen. width
Available screen workspace Height: window. screen. availHeight
Available workspace width: window. screen. availWidth

Precise HTML positioning: scrollLeft, scrollWidth, clientWidth, and offsetWidth
ScrollHeight: gets the scroll height of an object.
ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.
ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window.
ScrollWidth: gets the scroll width of an object.
OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.
OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.
The horizontal coordinates of event. clientX relative to the document
The vertical coordinates of event. clientY relative to the document
Horizontal coordinates of event. offsetX relative to the container
Event. offsetY vertical coordinates of the container
Document.doc umentElement. scrollTop vertical scroll Value
Event.clientxw.document.doc umentElement. The horizontal coordinate of scrollTop relative to the document + The amount of 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

(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)

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

This section uses the window attributes of the Document Object. The main functions and usage of these attributes are as follows.

To get the window size, you need to use different properties and methods for different browsers:

To check the real size of the Window, use the Window attribute in Netscape;

In IE, you need to go deep into the Document to check the body;

In the DOM environment, to obtain the window size, pay attention to the size of the root element, rather than the element.

The innerWidth attribute of the Window object contains the internal width of the current Window.

The innerHeight attribute of the Window object contains the internal height 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 indicates the root node of the HTML Document.

Document. body. clientHeight indicates the current height of the window where the HTML document is located.

Document. body. clientWidth indicates the current width of the window where the HTML document is located.

Implementation Code:

The Code is as follows:

Adjust the browser window



Adjust the browser window size