Detailed description of window and window. screen objects in JavaScript programming

This article mainly introduces the window and window. screen objects in JavaScript programming, which are the basis for JS visual programming in the browser. For more information, see Window object
All browsers support window objects. It indicates the browser window.
All JavaScript global objects, functions, and variables are automatically members of the window object.
The global variable is the property of the window object.
Global functions are the methods of window objects.
Even the document of html dom is one of the properties of the window object:

window.document.getElementById("header");

Same as this:

document.getElementById("header");

Window size
There are three ways to determine the size of the browser window (the browser's viewport, excluding the toolbar and scroll bar ).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:

• Window. innerHeight-the internal height of the browser window
• Window. innerWidth-the internal width of the browser window

For Internet Explorer 8, 7, 6, and 5:

• Document.doc umentElement. clientHeight
• Document.doc umentElement. clientWidth

Or

• Document. body. clientHeight
• Document. body. clientWidth

Practical JavaScript solution (covering all browsers ):

Instance

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

In this example, the height and width of the browser window are displayed: (excluding the toolbar/scroll bar)

Window Screen
The window. screen object can be written without the window prefix.
Some attributes:

• Screen. availWidth-available screen width
• Screen. availHeight-available screen height
• Available Window Screen width
• The screen. availWidth attribute returns the width of the visitor's screen, in pixels, minus the interface features, such as the window taskbar.

Instance

Return the available width of your screen:

《script》document.write("Available Width: " + screen.availWidth);《script》

The above code is output:

Available Width: 1440

Available Window Screen height
The screen. availHeight attribute returns the height of the visitor's screen, in pixels, minus the interface features, such as the window taskbar.
Instance
Return the available height of your screen:

《script》document.write("Available Height: " + screen.availHeight);《script》

The above code will be output:

Available Height: 860