Code _javascript tips for getting the location of page elements with JavaScript

The following tutorial summarizes the knowledge of JavaScript in Web site positioning.

One, the absolute size and relative size of the Web page

First, there are two basic concepts to be clarified.

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

The relative size of a Web page refers to the part of the page that is seen in the browser window, which is the size of the browser window, also called the viewport (viewport).

The box in the middle of the figure below represents a browser window that can display only a subset of the pages at a time.

(Figure a page's absolute size and relative size)

Obviously, if the content of the Web page can be displayed in the browser window (that is, not the scroll bar), then the absolute size and relative size of the page is equal.

Second, get the relative size of the Web page

Each element on a Web page has clientheight and clientwidth attributes, and you can use them to get the relative size of the page. The size represented by these two properties refers to the content of the element plus the size of the padding, but does not include the space occupied by the border and scroll bars.

(Figure II ClientHeight and ClientWidth properties)

Therefore, the clientheight and clientwidth attributes of the document element represent the relative 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 note:
1 This function must be completed after the page is loaded to run, otherwise the document object has not been generated, the browser will complain.
2 In most cases, the Document.documentElement.clientWidth returns the correct value. However, in the IE6 quirks mode, Document.body.clientWidth returns the correct value, so the function adds a judgment to the document pattern.
3 clientwidth and ClientHeight are read-only properties and cannot be assigned values.

Third, get the absolute size of the Web page

The ScrollHeight and ScrollWidth properties of the Document object are the absolute size of the Web page, meaning that the scroll bar rolls over all the lengths and widths.

You can write the Getpagearea () function by imitating 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. As mentioned earlier, if the content of the Web page can be displayed in the browser window, the scroll bar will not appear, then the absolute size of the page and the relative size should be equal, that is, clientwidth and scrollwidth should be equal. But in fact, different browsers have different processing, the two values are not equal. So, we need to take the larger of those values, so we want to overwrite 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. get the absolute position of the page elements

Because the page size has absolute and relative points, so the page element location also has absolute and relative points. The upper-left corner of the page element is the absolute position relative to the upper-left corner of the entire page, and the relative position relative to the upper-left corner of the browser window.

In a JavaScript language, the absolute coordinates of a Web page element are computed. Each element has a offsettop and offsetleft attribute that represents the distance between the upper-left corner of the element and the upper-left corner of the parent container (Offsetparent object). So the absolute coordinates of the element can be obtained simply by accumulating the two values.

(Figure III offsettop and Offsetleft properties)

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

Because 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.

V. Get the relative position of the page elements

With the absolute position of an element, it is easy to get a relative position, as long as you subtract the scroll bar from the absolute coordinates. The vertical distance of the scroll bar scrolling 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 four 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 are assignable and automatically scrolls 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 page elements to appear in the upper-left corner of the browser window.

A quick way to get the position of an element

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

That is using the Getboundingclientrect () method. It returns an object that contains the left, right, top, and bottom four properties, corresponding to the upper-left corner of the element and the lower-right-hand corner relative to the top left-hand 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 can get an absolute position.

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

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

At present, IE, Firefox 3.0+, Opera 9.5+ Support this method, and Firefox 2.x, Safari, Chrome, Konqueror not supported.

Finish