JS get page window size, browser window size, page element position

Blog from Nanyi "http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

One or two concepts

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

　　browser window Size: the size of the browser window refers to the portion of the page area that you see in the browser window, also known as 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.

　　

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,

Therefore, the function is added to the judgment of 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.

　　

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.

　　

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.

JS get page window size, browser window size, page element position