JS get screen, browser, page height width code

Last Update:2017-08-24 Source: Internet

Author: User

Keywords Web page production Ajax javascript

Tags ajax browser code content document document object full text get

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More