Home > Developer > Web Develop
1. Windows and Browsers
Window.innerwidth, Window.innerheight Browser internal available wide height
Window.outerwidth, Window.outerheight browser Overall width high
Window.screentop (Firefox uses screenx) the distance from the top of the screen in the upper left corner of the browser (IE, Opera, chrome if close to the top of the screen, top is the height of the browser toolbar, and Firefox is 0)
Window.screenleft ((Firefox screeny) the upper left corner of the browser distance from the left side of the screen
Window.screen.width, Window.screen.height (screen resolution)
Window.screen.availwidth/availheight (width of the available workspace on the screen)
2. Wide height under document
Clientwidth/clientheight:
The visible part width and height of the element, i.e. Padding+content
If there is no scrollbar, the width height set for the element
There are scrollbars, originally wide-height-the width of the scroll bar
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style>. One{width:200px;Height:200px;background:Red;Border:1px solid #000000;Overflow:Auto; } </style></Head><Body><Divclass= "One">JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR>JavaScript Advanced Apps<BR></Div><Script>window.onload=function(){ varOdiv=document.getElementsByTagName ('Div')[0]; Console.log (Odiv.clientwidth+":"+odiv.clientheight); }</Script></Body></HTML>
Because there is a vertical scrollbar, the width of the clientwidth=200-scroll bar
ClientTop, ClientLeft:
The width of the border of the element (the top border is wide, and the left border is the cosmos)
ScrollHeight and ScrollWidth:
As the name implies, these two properties refer to the actual width and height of the content inside the element when the content inside the element exceeds its width and height.
Divide body and div two kinds:
Div:
1. No scroll axis
ScrollWidth = clientwidth = width + padding*2
2 A rolling axis (not including the rolling axis)
ScrollWidth = actual content width (contains scrollable parts, the container itself has a wide height limit) + padding*2
ScrollHeight = actual content height (contains scrollable parts, the container itself has a wide height limit) + padding*2
Body
1. No scroll axis:
1. Width height is less than browser window: Width of browser window ( different browsers have different processing, take clientwidth and scrollwidth larger one )
2. Wide-Height browser window: The actual height of the content +padding+margin
2 A scroll axis: The actual height of the content +padding+margin
ScrollTop and ScrollLeft
A property can be read and written, which refers to the height and width of the element being rolled up when the content of the element exceeds its wide height.
Offsetwidth and Offsetheight
This pair of attributes refers to the width and height of the element's border+padding+content, whether the property and its internal contents are outside the element size, only the border and width and height that were set.
Offsetleft and offsettop
Speaking of this pair of attributes need to say offsetparent, the so-called offsetparent refers to the current element of the nearest to their own location (position: Absolute or position:relative) a parent element (not just a direct parent element, as long as it is a parent element), which is the offsetparent of the current element, and if you look up from that element, you cannot find such a parent element. Then the offsetparent of the current element is the BODY element. Offsetleft and offsettop refer to the current element, relative to its offsetparent left and top distance, i.e. the distance from the current element's border to offsetparent that contains it is as follows:
To get the width of a Web page, you need to use Document.compatmode to determine how the current browser is rendered
Backcompat: Standard compatibility mode is off.
Css1compat: Standard compatibility mode is turned on.
When Document.compatmode equals Backcompat, use document.body.xxx;
When Document.compatmode equals Css1compat, use document.documentElement.xxx.
Specific applications can refer to the location of page elements with JavaScript
Location of 3.Event
Clientx and Clienty
Mouse click Position relative to the browser (viewable area) coordinates (0,0), calculate the mouse click position distance its upper left corner position, regardless of the browser window size changes, will not affect the click position coordinates
Pagex and Pagey
Mouse click Position relative to the location of the page, usually the browser window does not appear when the scroll bar, the property and Event.clientx and Event.clienty is equivalent, but when the browser appears scroll bar, Pagex is usually greater than clientx
Screenx and Screeny
The coordinates of the mouse click position relative to the screen
OffsetX and OffsetY
The mouse click position relative to the upper left corner of the container as the starting point of the coordinates, but Firefox does not support this property, Firefox and this attribute corresponds to the concept is, Event.layerx and Event.layery
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style>. One{width:200px;Height:200px;background:Red;Border:1px solid #000000;Overflow:Auto; } /*body{height:5000px; } */ </style></Head><Body><Divclass= "One"ID= "One"></Div><Script>document.getElementById (" One"). onclick=function(e) {console.log (E.OFFSETX); }</Script></Body></HTML
When you click the upper left corner of the Div, the value of x is small, and the value of x is large when you click the lower right corner.
JS get all kinds of wide-height
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
