Several properties of screen size calculation in JS learning notes

Basic concepts

Document.body.clientWidth:refers toBody Object Width
Document.body.clientHeight:refers toBody Object Height
Document.documentElement.clientWidth: refers toVisible Area Width
Document.documentElement.clientHeight: refers to Visible Area Height

Window.innerheight-Interior height of the browser window

Window.innerwidth-Interior width of the browser window

Clientx/clienty : The event property returns the horizontal/vertical coordinates (without scroll bars) of the mouse pointer to the browser page (the current window) when the event is triggered .

Pagex/pagey: Refers to the position of the mouse on the page, to the left of the page as a reference point , the x/y coordinates of the mouse relative to the entire page (all of the pages).

offsetx/offsety: The position of the mouse relative to the element that triggered the event, The x offset coordinates of the mouse pointer between the fill edge of the event and the target node : Special Note: only IE support!

screenx/screeny: The position of the mouse in the screen, refers to the distance of the mouse to the left side of the computer screen

The x, y coordinates of the mouse relative to the upper-left corner of the user Monitor screen . Both standard events and IE Events Define these 2 Properties

Borrow a picture to illustrate:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/82/D0/wKioL1dh-sDBpcGtAABiAi1IVBI254.png "title=" The event object. png "alt=" wkiol1dh-sdbpcgtaabiai1ivbi254.png " />

Clientwidth/clientheight: no border with elements

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/82/D0/wKioL1dh-tHhFEMyAABhqJk1Otc500.jpg "title=" Client.jpg "alt=" wkiol1dh-thhfemyaabhqjk1otc500.jpg "/>

Offetwidth/offsetheight: Contains the bounding rectangle of the element

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/82/D1/wKiom1dh-cfzU1V9AABmqQySle0997.jpg "title=" Offset.jpg "alt=" wkiom1dh-cfzu1v9aabmqqysle0997.jpg "/>

offsetparent is a read-only property, Returns a pointer to the nearest ( closest offsetparent for the most recent table element object or root element (Standard mode Span style= "FONT-FAMILY:CALIBRI;" >html quirks mode is body ).

offsetleft: Gets the object relative to the page The left position of the computed polygon or the parent coordinate specified by the offsetParent Property

OffsetTop: Gets the object relative to the page The top position of the computed polygon or the parent coordinate specified by the offsetTop Property

This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1789768

Several properties of screen size calculation in JS learning notes