JS get browser window size get screen, browser, page height widthPage visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge width)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of 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 scrolling height of the object.
ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost part of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate offsetparent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx the horizontal coordinates of the relative document
Event.clienty vertical coordinates relative to document
The horizontal coordinates of the event.offsetx relative to the container
The vertical coordinates of the event.offsety relative to the container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling amount
Ie,firefox differences 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
(Need to mention: CSS in the Margin property, and ClientWidth, Offsetwidth, clientheight, offsetheight are irrelevant) page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth-------------------Technical Essentials
This section of code mainly uses some of the properties of the document object with regard to the window, the main features and usage of these properties are as follows.
To get the size of the window, for different browsers, you need to use different properties and methods: To detect the real size of the window, you need to use the properties of Windows under Netscape; in IE, you need to go deep inside the document to detect the body; In a DOM environment, To get the size of the window, you need to be aware of the size of the root element, not the element.
The Innerwidth property of the Window object contains the internal width of the current windows. The Innerheight property of the Window object contains the internal height of the current windows.
The Body property of the Document object corresponds to the label 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 in which the HTML document resides. Document.body. clientwidth represents the current width of the window in which the HTML document resides.
Implementing Code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
source program Interpretation (1) The program first establishes a form that contains two text boxes to display the current width and height of the window, and its value changes as the window changes in size. (2) in the following JavaScript code, the first defines two variables winwidth and winheight, which are used to save the height and width values of the window. (3) Then, in function finddimensions (), use Window.innerheight and window.innerwidth to get the height and width of the window and save the two in the preceding two variables. (4) Further through the document inside the body to detect, get the window size, and stored in the above two variables. (5) At the end of the function, the result is output to two text boxes by accessing the form element by name. (6) At the end of the JavaScript code, complete the operation by calling the Finddimensions () function.
Article Source: http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html
