JS get screen, browser, page height width code

Source: Internet
Author: User
Keywords Web page production Ajax javascript
Tags ajax browser code content document document object full text get

<! 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>

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.