Get the location of page elements with JavaScript

Get the location of page elements with JavaScript

Nanyi

In the process of making a Web page, you sometimes need to know exactly where an element is on the page.

The following tutorials summarize JavaScript's knowledge of Web positioning.

One, the size of the Web page and the size of the browser window

First, there are two basic concepts to be clarified.

The whole area of a webpage is its size. Typically, the size of a Web page is determined by the content and CSS style sheets.

The size of the browser window is the portion of the page area that you see in the browser window, also called viewport (viewport).

Obviously, if the contents of a Web page are all displayed in the browser window (that is, the scroll bar does not appear), the size of the page is equal to the size of the browser window. If not all, scroll the browser window to display the sections of the page.

Second, get the size of the Web page

Each element on a Web page has the ClientHeight and ClientWidth properties. These two attributes refer to the content portion of the element plus the visual area occupied by the padding, excluding the space occupied by the border and scrollbars.

(Figure one clientheight and ClientWidth properties)

Therefore, the clientheight and ClientWidth properties of the document element represent the size of the Web 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 can return the height and width of the browser window. When used, there are three places to be aware of:

1) This function must be completed after the page is loaded to run, or the Document object has not been generated, the browser will error.

2) In most cases, the Document.documentElement.clientWidth returns the correct value. However, in IE6 's quirks mode, Document.body.clientWidth returns the correct value, so the function adds a judgment on the document schema.

3) ClientWidth and clientheight are read-only properties and cannot be assigned values.

Another way to get the size of a Web page

Each element on the page also has the ScrollHeight and ScrollWidth properties, which are the visual area of the element, including the ScrollBar.

Then, the ScrollHeight and ScrollWidth properties of the Document object are the size of the page, meaning that all the lengths and widths of the scroll bar are rolled over.

The Getpagearea () function can be written in the GetViewport () 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 Web page is displayed in the browser window and no scroll bar appears, then the ClientWidth and scrollwidth of the page should be equal. But in fact, different browsers have different processing, these two values may not be equal. So, we need to take the larger value of them, so we have 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)
}
}
}

Iv. getting the absolute position of the page element

The absolute position of the page element, which is the coordinate of the upper-left corner of the element relative to the upper-left corner of the entire page. This absolute position is to be obtained by calculation.

First, each element has the offsettop and Offsetleft properties, representing the distance from the upper-left corner of the element to the upper-left corner of the parent container (Offsetparent object). Therefore, the absolute coordinates of the element can be obtained simply by accumulating the two values.

(Figure II offsettop and Offsetleft properties)

The following two functions can be used to obtain the horizontal and vertical coordinates of an 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;
}

Because the Offsetparent object does not necessarily equal the parent container in tables and IFRAME, the above function does not apply to elements in tables and IFRAME.

V. Get the relative position of the page element

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

With an absolute position, it is easy to get a relative position, as long as the absolute coordinates are subtracted from the scroll bars of the page. The vertical distance of the scrollbar scroll, which is the ScrollTop property of the Document object, and the horizontal distance of the scroll bar scrolling is the ScrollLeft property of the Document object.

(Figure III ScrollTop and ScrollLeft properties)

Overwrite 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 the page element to appear in the upper-left corner of the browser window.

Vi. a quick way to get the position of an element

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

That is to use the Getboundingclientrect () method. It returns an object that contains the left, right, top, and bottom four properties that correspond to the distance between the top and bottom corners of the element relative to the upper-left corner of the browser window (viewport).

So, the relative position of the page element is

var x= this.getboundingclientrect (). Left;

var Y =this.getboundingclientrect (). Top;

Plus the scrolling distance, you get the absolute position.

var x= this.getboundingclientrect (). Left+document.documentelement.scrollleft;

var Y =this.getboundingclientrect (). Top+document.documentelement.scrolltop;

Currently, IE, Firefox 3.0+, Opera 9.5+ Support this method, and Firefox 2.x, Safari, Chrome, Konqueror do not support.

Finish

Document Information

• Copyright Disclaimer: Free Reprint-Non-commercial-non-derivative-maintain attribution (Creative Commons 3.0 license)
• Published: September 14, 2009
• More Information: Archive»javascript
• Paid Support: Buy anthology
• Social media: Twitter, Weibo
• Feed Subscription:

Related articles

• 2014.09.14: Introduction to the front-end Module Manager Modular architecture has become the mainstream of web development.
• 2014.04.30: "ECMAScript 6 Get Started" online for the past one months, I wrote a book "ECMAScript 6", which is online today.
• 2014.03.28:undefined differs from NULL in most computer languages, and there is only one value that represents "none", for example, the Null,java language of the C language, the Null,python language of the None,ruby language of nil.
• 2013.10.21: What is Event Loop? Event Loop is a very important concept, which refers to a running mechanism of a computer system.

Advertisement (buy ad bit) message (17 article)

DYLANKLC says:

JS do not prototype handwriting or very annoying ...

September 14, 2009 17:43 | Archive | Reference

Joiho says:

Brother Ruan is really learning everything.
Many people are looking forward to your study experience, sentiment related articles, as if not positively said will not write

September 14, 2009 20:07 | Archive | Reference

Class 3 Shun Chunyang says:

The last method is more useful, only pleasure, but no sense of accomplishment

September 15, 2009 09:30 | Archive | Reference

old plow says:

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
}
}
}
--------------------------------
This code is a bit verbose and can be changed to this.
function My_function () {
if (xxxx) {
return xxxx;
}
return xxxx;
}
or this:
function My_function () {
var ret_value = null;
if (xxxx) {
Ret_value = xxxx;
}
return ret_value;
}

Get the location of page elements with JavaScript