js to obtain basic browser information_Basic knowledge

Visible area width of web page: document.body.clientWidth
The height of the visible area of ​​the web page: document.body.clientHeight
The width of the visible area of ​​the web page: document.body.offsetWidth (including the width of the edges)
The height of the visible area of ​​the web page: document.body.offsetHeight (including the width of the edge)
Full text width of web page body: document.body.scrollWidth
Full text height of web page body: document.body.scrollHeight
The page was scrolled so high: document.body.scrollTop
The left side of the web page being scrolled: document.body.scrollLeft
On the main body of the web page: window.screenTop
The left side of the main body of the web page: window.screenLeft
High screen resolution: window.screen.height
The width of the 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 scroll 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: Set or get the distance between the top of the object and the top of the visible content in the window
scrollWidth: Get the scroll width of the object
offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property
offsetLeft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property
offsetTop: Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
event.clientX horizontal coordinate relative to the document
event.clientY vertical coordinate relative to the document
event.offsetX horizontal coordinate relative to the container
event.offsetY vertical coordinate relative to the container
document.documentElement.scrollTop value of vertical scrolling
event.clientX document.documentElement.scrollTop The horizontal coordinate 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

(It needs to be mentioned: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, and offsetHeight)

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

Technical Points

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

To get the size of the window, different properties and methods need to be used for different browsers: to detect the real size of the window, you need to use the properties of the Window under Netscape; under IE you need to go deep inside the Document to perform the body Detection; in the DOM environment, if you want 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 inner width of the current window. The innerHeight property of the Window object contains the inner height of the current window.

The body attribute of the Document object corresponds to the tag 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 where the HTML document is located. document.body.clientWidth represents the current width of the window where the HTML document is located.

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

In my local test: it can be used under IE, FireFox, and Opera

document.body.clientWidth

Document.body.clientHeight can be obtained, it is very simple and convenient.

And in company projects: Opera still uses

document.body.clientWidth

document.body.clientHeight

But IE and FireFox use

document.documentElement.clientWidth

document.documentElement.clientHeight

It turns out that the W3C standard is causing troublehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you add this line of tags 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, BODY object width plus Margin width) document.documentElement.clientHeight ==>gt; Page object height (that is, BODY object height plus Margin height)

And if there is no W3C standard defined,

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 (i.e. BODY object height plus Margin height)

Opera is: document.documentElement.clientWidth ==> page object width (that is, BODY object width plus Margin width)

document.documentElement.clientHeight ==> Page object height (i.e. BODY object height plus Margin height)

It’s really a troublesome thing. In fact, from the perspective of front-end design and development, it would be much more convenient to have fewer objects and methods and not use the latest standards. But if you can't keep up with the trend, you will never be a senior designer, so we still have to understand and master this knowledge.