Home > Developer > JavaScript
The position of the element is measured in pixels, to the right represents an increase in the x-coordinate of the Y coordinate, but there are two different points as the origin of the coordinate system: the x and y coordinates of the elements can be relative to the upper-left corner of the document or the upper-left corner of the viewport that displays the document relative to the job.
In the Rating window and tab, the viewport is just part of the browser that actually displays the document's content: it does not include the browser's "shell" (such as menus, toolbars, and tab pages).
The document that is also displayed for the framework is the <iframe> element that has the oral framework page. In any case, when the discussion element is positioned, it must be clear whether the coordinates used are document coordinates or viewport coordinates. (Note that the viewport coordinates are also known as window coordinates)
If the document is smaller than the viewport, or if scrolling is not present, the upper-left corner of the document is the upper-left of the viewport, and the document and viewport coordinate systems are the same. However, in general, to convert between the two coordinate systems, you must add or subtract the scrolling offset (scroll offset). For example, if the y-coordinate of an element in document coordinates is 200 pixels and the user has scrolled the browser down by 75 pixels, the y-coordinate of the element in the viewport coordinates is 125 pixels. Similarly, if the x-coordinate of an element is 400 pixels in the viewport coordinates, and the user has scrolled the viewport 200 pixels horizontally, the x-coordinate of the pixel in the document coordinates is 600 pixels.
Document coordinates are more basic than viewport coordinates, and they are not changed when users scroll. However, the use of viewport coordinates in client programming is very common. Document coordinates are applied when you specify the position of an element using CSS. But the simplest way to query element placement: Getboundingclientrect () returns the position in the viewport coordinates. Similarly, when registering an event handler function for mouse events, the coordinates of the reported mouse pointer are in the viewport coordinate system.
In order to transform in the coordinate system, we need to determine the position of the scroll bar of the browser window. The Pagexoffset and pageYOffset properties of the Window object provide these values in all browsers, except for IE8 and earlier versions. IE (and all modern browsers) can also use the ScrollLeft and ScrollTop properties to get the scroll bar position. It is confusing to get these properties by looking for the root node (document.documentelement) of the document in normal circumstances, but in weird mode, you must query them on the <body> elements (documeng.body) of the document. The following shows how to easily query the location of scroll bars.
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17-18 | Functon Getscrolloffsets (w) {w = W | | | window; var sleft,stop; if (w.pagexoffset!= null) {sleft = W.pagexoffset; sTop = W. pageYOffset; return {x:sleft,y:stop}; } if (Document.compatmode = = "Css1compat") {sleft = Document.documentElement.scrollLeft = = 0? document.body.scrollleft:d Ocument.documentElement.scrollLeft; STop = Document.documentElement.scrollTop = 0? Document.body.scrollTop:document.documentElement.scrollTop; return {x:sleft,y:stop}; }else if (Document.compatmode = = "Backcompat") {sleft = Document.body.scrollLeft; sTop = Document.body.scrollTop; return { X:sleft,y:stop}; } } |
Sometimes it is useful to be able to determine the size of the viewport, for example, to make sure that the case section of the document is currently visible. A simple way to query the size of a viewport using a scrolling offset is not working in IE8 and earlier versions, and the wizard's running in IE depends on whether the browser is in a weird mode or standard mode.
Properties under window:
Innerheight: The height of the content portion of the window, including the scroll bar
Innerwidth: The width of the content portion of the window, including the scroll bar
Outerheight: The height of the entire browser, including all components of the interface.
Outerwidth: The width of the entire browser, including all components of the interface.
Pagexoffset: The position of the scroll bar x axis of the browser window
pageYOffset: The position of the scroll bar y-axis of the browser window
SCROLLX: The position of the scroll bar x axis of the browser window
Scrolly: The position of the scroll bar y-axis of the browser window
Property
Document.documentelement document.body
The size of the visible content within the clientheight viewport, excluding the scrolling parts and scroll bars.
ClientWidth
ClientLeft
ClientTop
Offsetheight content size, and includes scroll bars.
Offsetwidth
Offsetleft
offsettop
ScrollHeight the size of the scrolling content, including the scrolling part, but not the scroll bar.
ScrollWidth
ScrollTop
ScrollWidth
The viewport size of the query window:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17-18 | function Getviewportsize (w) {w = w | | window; var cwidth,cheight; if (w.innerwidth!= null) {cwidth = W.INNERWIDHT; Cheight = W.innerheight; return {w:cwidth,h:w.cheight}; } if (Document.compatmode = = "Css1compat") {cwidth = Document.documentElement.clientWidth; Cheight = Doument.documentElement.clientHeight; return {w:cwidth,h:w.cheight}; }else if (Document.compatmode = = "Backcompat") {cwidth = Document.body.clientWidth; Cheight = Doument.body.clientHeight; return {w:cwidth,h:w.cheight}; } } |
The above mentioned is the entire content of this article, I hope you can enjoy.
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
