JavaScript Gets the example of the width of the visual region of the window

In jquery we can easily get the width of the viewable area of the entire browser window:

code is as follows

copy code

Alert ( window). Height ()); The window's viewable area height Alert ($ (document). Height ()), or the height of the window document in the browser today Alert ($ (document.body). Height ()); The height of the window document body is Alert ($ (document.body). Outerheight (True)) when the browser is present;//Browser The total height of the window document body includes border padding margin Alert ($ (window). width ()); The window's visible area width Alert ($ (document). wide ()),//browser is currently the window document for image width Alert ($ (document.body). width ()); The height of the window document body is Alert ($ (document.body). Outerwidth (True)) when the browser is present;//Browser The total width of the body of the window document currently includes border padding margin &NBSP Alert (document). ScrollTop ();//Get the vertical height of the scroll bar to the top Alert ($ (document). ScrollLeft ());//Get the vertical width of the scroll bar to the left

But how do you get this value in native JavaScript? The idea of getting this value is a whole bunch of web sites, but most of them are getting a wide screen, not the width of the viewable area of the browser. Because the size of the screen is not very important for the Web page, but the visual area can be different, the user may change the size of the browser at any time, so get the width of the browser's viewable area can dynamically adjust some of the content that requires JavaScript control. What is a visual region?

As in the picture of the Firefox browser, although the browser the whole window is very large, but the console is half occupied, so the visual area is to show the content area of the Web page is wide, because the console can not display the content of the Web page, so the console does not count, you pull the console when the width of the visual area of the page will also change.

The height of the viewable area is not equal to the height of the content, as the page in the picture does not have any content, but the height of the viewable area has nothing to do with it, and scroll bars appear if the content exceeds the height or width of the viewable area. To get the width of the viewable region, each browser gets a different fetch method, such as:

FireFox document.body.scrollHeight

chrome/ie document.documentElement.clientHeight

So I wrote a method, compatible with IE (7+)/chrome/firefox and other mainstream browsers

code is as follows	copy code
var winsize = function () {     var e = window,  &NB sp;      a = ' inner ';       if (! Innerwidth ' in Window ') {         a = ' client ';         e = document.documentelement | | document.body;    }       return {width:e[+ ' width '], height:e[+ ' height '}; };   Winsize () .height;  //Height Winsize () .width;   //width