<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.jzread.com/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>
<title> special effects Get screen, browser, Web page height width code </title>
Some of the properties of the Document object about Windows are used primarily, and the main functions and usages 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; 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.
JS access screen, browser, page height width
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 width)
Page body Full text width: document.body.scrollwidth
Full text of the Web page: document.body.scrollheight
Web pages are rolled High: document.body.scrolltop
Pages are rolled away left: document.body.scrollleft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Screen resolution width: 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: Get 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 Relative Document Horizontal coordinates
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 Vertical Scrolling Value
Event.clientx+document.documentelement.scrolltop relative to document 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
(To mention: The margin attribute in the CSS tutorial, it has nothing to do with ClientWidth, offsetwidth, ClientHeight, offsetheight)
</head>
<body>
</body>
</html>