Shulou(Shulou.com)05/31 Report--

The knowledge of this article "Javascript how to get the location of the page elements" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Javascript how to get the location of the page elements" article.

The size of the web page and the size of the browser window

First of all, two basic concepts should be clarified.

The total area of a web page is its size. Typically, the size of a web page is determined by the content and CSS stylesheet.

The size of the browser window refers to the area of the web page seen in the browser window, also known as viewport (viewport).

Obviously, if the contents of the web page can be fully displayed in the browser window (that is, there is no scroll bar), then the size of the web page is equal to the size of the browser window. If not all of them are displayed, scroll through the browser window to show all parts of the page.

Second, get the size of the web page

Every element on a web page has clientHeight and clientWidth attributes. These two attributes refer to the content part of the element plus the visual area occupied by the padding, excluding the space occupied by the border and the scroll bar.

Therefore, the clientHeight and clientWidth attributes of the document element represent the size of the page.

Function getViewport () {if (document.compatMode = = "BackCompat") {return {width: document.body.clientWidth height: document.body.clientHeight}} else {return {width: document.documentElement.clientWidth, height: document.documentElement.clientHeight}

The getViewport function above returns the height and width of the browser window. When using it, there are three areas to pay attention to:

1) this function can only be run after the page is loaded, otherwise the document object has not been generated and the browser will report an error.

2) in most cases, document.documentElement.clientWidth returns the correct value. However, in IE6's quirks schema, document.body.clientWidth returns the correct value, so the judgment of the document schema is added to the function.

3) clientWidth and clientHeight are both read-only properties and cannot be assigned to them.

Third, another way to get the size of a web page

Each element on the page also has scrollHeight and scrollWidth attributes, which refer to the visual area of the element, including the scroll bar.

Then, the scrollHeight and scrollWidth properties of the document object are the size of the page, meaning all the length and width of the scroll bar.

Modeled on the getViewport () function, you can write the getPagearea () function.

Function getPagearea () {if (document.compatMode = = "BackCompat") {return {width: document.body.scrollWidth height: document.body.scrollHeight}} else {return {width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight}

However, there is a problem with this function. If the content of the page can be fully displayed in the browser window without scrollbars, then the clientWidth and scrollWidth of the page should be equal. But in fact, different browsers have different processing, and the two values are not necessarily equal. So, we need to take the larger of them, so we need to rewrite the getPagearea () function.

Function getPagearea () {if (document.compatMode = = "BackCompat") {return {width: Math.max (document.body.scrollWidth, document.body.clientWidth), height: Math.max (document.body.scrollHeight, document.body.clientHeight)} else {return {width: Math.max (document.documentElement.scrollWidth, document.documentElement.clientWidth), height: Math.max (document.documentElement.scrollHeight, document.documentElement.clientHeight)}

Get the absolute position of the elements of the web page

The absolute position of a web page element refers to the coordinates of the upper-left corner of the element relative to the upper-left corner of the entire page. This absolute position can only be obtained by calculation.

First, each element has offsetTop and offsetLeft attributes that represent the distance between the upper-left corner of the element and the upper-left corner of the parent container (the offsetParent object). Therefore, you only need to add these two values to get the absolute coordinates of the element.

(figure II offsetTop and offsetLeft properties)

The following two functions can be used to obtain the Abscissa and ordinate of the absolute position.

Function getElementLeft (element) {var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current! = = null) {actualLeft + = current.offsetLeft; current = current.offsetParent;} return actualLeft;} function getElementTop (element) {var actualTop = element.offsetTop; var current = element.offsetParent; while (current! = null) {actualTop + = current.offsetTop; current = current.offsetParent;} return actualTop;}

Since the offsetParent object is not necessarily equal to the parent container in tables and iframe, the above function does not apply to elements in tables and iframe.

Fifth, get the relative position of the web page elements

The relative position of the web page element refers to the coordinates of the upper-left corner of the element relative to the upper-left corner of the browser window.

Once you have the absolute position, it's easy to get the relative position, as long as you subtract the absolute coordinates from the scrolling distance of the page's scroll bar. The vertical distance at which the scroll bar scrolls is the scrollTop property of the document object; the horizontal distance at which the scroll bar scrolls is the scrollLeft property of the document object.

(figure 3 scrollTop and scrollLeft properties)

Rewrite the two functions in the previous section accordingly:

Function getElementViewLeft (element) {var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current! = = null) {actualLeft + = current.offsetLeft; current = current.offsetParent;} if (document.compatMode = = "BackCompat") {var elementScrollLeft=document.body.scrollLeft;} else {var elementScrollLeft=document.documentElement.scrollLeft;} return actualLeft-elementScrollLeft;} function getElementViewTop (element) {var actualTop = element.offsetTop; var current = element.offsetParent; while (current! = null) {actualTop + = current. OffsetTop; current = current.offsetParent;} if (document.compatMode = = "BackCompat") {var elementScrollTop=document.body.scrollTop;} else {var elementScrollTop=document.documentElement.scrollTop;} return actualTop-elementScrollTop;}

The scrollTop and scrollLeft properties can be assigned and automatically scroll the page to the appropriate location immediately, so you can use them to change the relative position of the page elements. In addition, the element.scrollIntoView () method has a similar effect, allowing Web page elements to appear in the upper-left corner of the browser window.

6. A fast method to obtain the location of elements

In addition to the above function, there is a quick way to get the location of the elements of the page immediately.

That is to use the getBoundingClientRect () method. It returns an object containing four attributes, left, right, top, and bottom, corresponding to the distance between the upper-left corner and the lower-right corner of the element relative to the upper-left corner of the browser window (viewport).

So, the relative position of the web page element is

Var X = this.getBoundingClientRect (). Left; var Y = this.getBoundingClientRect (). Top

Add the rolling distance and you can get the absolute position.

Var X = this.getBoundingClientRect (). Left+document.documentElement.scrollLeft; var Y = this.getBoundingClientRect (). Top+document.documentElement.scrollTop; above is about "how to get the location of page elements in Javascript", I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.