Home > Developer > JavaScript
In the rating window and tab, the "View" is only part of the browser that actually displays the document content: it does not include the "shell" of the browser (such as menus, toolbar, and tabs ).
For the documents that are also displayed in the Framework, the Framework page is customized.Element. In either case, when discussing the position of an element, you must determine whether the coordinates used are the document coordinates or the viewport coordinates. (Note: The Window coordinate is also called the window coordinate.) </p> <p> If the document is smaller than the window coordinate, or does not scroll, the upper left corner of the document is the upper left corner of the view, the document and the viewport coordinate system are the same. However, to convert the two coordinate systems to one another, you must add or subtract the scroll offset ). For example, if the Y coordinate of an element in the coordinate document is 200 pixels and the user has rolled down 75 pixels in the browser, the Y coordinate of the element in the coordinate document is 125 pixels. In the same way, if the X coordinate of an element is 400 pixels, and the user has horizontally rolled 200 pixels, in this case, the X coordinate of the element in the X coordinate of the pixel in the document coordinate is 600 pixels. </P> <p> the coordinates of the document are more basic than those of the viewport, and they do not change when users scroll. However, it is very common to use the viewport coordinates in client programming. Document coordinates are used when CSS is used to specify the position of an element. However, the simplest method to query the element position is getBoundingClientRect (), which returns the position in the coordinates of the viewport. Similarly, when an event handler function is registered for a mouse event, the coordinates of the reported mouse pointer are in the viewport coordinate system. </P> <p style = "text-align: center"> </p> <p> to convert data in the coordinate system, you must determine the position of the scroll bar in the browser window. The pageXoffset and pageYOffset attributes of the Window object provide these values in all browsers except IE8 and earlier versions. IE (and all modern browsers) can also obtain the position of the scroll bar through the scrollLeft and scrollTop attributes. It is confusing to find the root node (document.doc umentElement) of the document in normal situations to obtain these attributes, but in weird mode, they must be queried on the <body> element (comment Eng. body) of the document. The following shows how to easily query the position of a scroll bar. <Br/> </p> <p class = "jb51code"> <pre class = "brush: js;"> functon getscroloffsets (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.doc umentElement. scrollLeft = 0 & #63; document. body. scrollLeft: document.doc umentElement. scrollLeft; sTop = document.doc umentElement. scrollTop = 0 & #63; document. body. scrollTop: document.doc umentElement. scrollTop; return {x: sLeft, y: sTop};} else if (document. c OmpatMode = "BackCompat") {sLeft = document. body. scrollLeft; sTop = document. body. scrollTop; return {x: sLeft, y: sTop };}</pre> </p> <p> sometimes it is very useful to determine the size of the view. For example, to determine whether the document is currently visible. The Simple Method of querying the size of the view using the scroll offset cannot work in IE8 or earlier versions, and the running of this technology in IE depends on whether the browser is in the weird or standard mode. </P> <p> properties in the window: </p> <p> innerHeight: height of the content part of the window, including the scroll bar </p> <p> innerWidth: width of the content part of the window, including the scroll bar </p> <p> outerHeight: the height of the entire browser, including all components of the interface. </P> <p> outerWidth: the width of the entire browser, including all components of the interface. </P> <p> pageXOffset: Position of the X axis of the browser window scroll bar </p> <p> pageYOffset: position of the Y axis of the browser window scroll bar </p> <p> scrollX: Position of the X axis of the browser window scroll bar </p> <p> scrollY: position of the Y axis of the browser window scroll bar </p> <p> attribute </p> <p> document.doc umentElement document. body <br/> the size of the visible content in clientHeight, excluding the scrolling part and the scroll bar. <Br/> clientWidth <br/> clientLeft <br/> clientTop <br/> content size of offsetHeight, including the scroll bar. <Br/> offsetWidth <br/> offsetLeft <br/> offsetTop <br/> the size of the scrollHeight scrolling content, including the scrolling content, but not the scroll bar. <Br/> scrollWidth <br/> scrollTop <br/> scrollWidth </p> <p> View window size: </p> <p class = "jb51code"> <pre class = "brush: js;"> 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.doc umentElement. clientWidth; cHeight = doument.doc umentElement. 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. cHe Ight };}</pre> </p> <p> the above is all about this article. I hope you will like it.
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
