Js to get the various width and height of the browser and Screen

Source: Internet
Author: User
This article mainly introduces js methods for obtaining the width and height of browsers and screens, which has good reference value. Let's take a look at it below. I. visible area width and height of the webpage, excluding the toolbar and scroll bar (visible area size of the browser window)

1. For IE9 +, chrome, firefox, Opera, and Safari:

Window. innerHeight the internal height of the browser window;

Window. innerWidth the internal width of the browser window;

2. For IE8.7.6.5:

Document.doc umentElement. clientHeight: The current height of the window where the HTML document is located;

Document.doc umentElement. clientWidth: The current width of the window where the HTML document is located;

Or, because the body attribute of the document Object corresponds toLabel, so it can also be expressed:

Document. body. clientHeight: The current height of the window where the HTML document is located;

Document. body. clientWidth: The current width of the window where the HTML document is located;

Conclusion:

Document. body. clientWidth/Height: the width and Height are too small. The Height is even 200 by default;

Document.doc umentElement. clientWidth/Height is always the same as the width and Height of window. innerWidth/Height.

So the Javascripit solution is practical in different browsers:

var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;

Ii. width and height of the webpage text

ScrollWidth and scrollHeight get the webpage content height and width

1. for IE. Opera:ScrollHeight is the actual height of the webpage content, which can be smaller than clientHeight;

2. For NS. firefox:ScrollHeight is the height of the webpage content, but the minimum value is clientHeight. That is to say, when the actual height of the webpage content is smaller than clientHeight, scrollHeight returns clientHeight;

3. browser compatible code:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;

2. visible area width and height of the webpage, including the same side of the scroll bar (will change with the display size of the window)

1. value:OffsetWidth = scrollWidth + left and right scroll bars + Left and Right borders;

OffsetHeight = scrollHeight + up/down scroll bar + up/down border;

2. browser compatibility code:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

3. Distance and offset of page volume removal

1. scrollLeft:Sets or obtains the distance between the left border of the specified object and the leftmost end of the currently visible content in the window;

2. scrollTop:Sets or obtains the distance between the top of a given object and the leftmost side of the currently visible content in the window;

3. offsetLeft:Sets or obtains the left-side position for calculation of the given object relative to the layout or the parent coordinate specified by the offsetParent attribute;

4. offsetTop:Sets or obtains the top position of the calculation of the given object relative to the layout or the parent coordinate specified by the offsetParent attribute;


For more js articles about various width and height of browsers and screens, refer to PHP!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.