In the process of making a Web page, you sometimes need to know exactly where an element is on the page.
The following tutorial summarizes the knowledge of JavaScript in Web site 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 Web page is its size. Typically, the size of a Web page is determined by the content and CSS stylesheets.
The size of the browser window refers to the area of the page that is seen in the browser window, also known as the Viewport (viewport).
Obviously, if the content of the Web page is displayed in the browser window (that is, not the scroll bar), the size of the Web page is equal to the size of the browser window. If you can't display all of them, scroll through the browser window to show the various parts of the page.
second, get the size of the Web page
Each element on a Web page has clientheight and clientwidth attributes. 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 ClientHeight and ClientWidth properties)
Therefore, the clientheight and clientwidth attributes of the document element represent the size of the Web page.
Copy Code code as follows:
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, another way to get the size of a Web page
Each element on a Web page also has a scrollheight and scrollwidth attribute, which refers to the visual area of the element, including the scroll bar.
The ScrollHeight and ScrollWidth properties of the Document object, then, are the 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.
Copy Code code as follows:
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 can be displayed in the browser window and the scroll bar does not appear, the clientwidth and scrollwidth of the page 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.
Copy Code code as follows:
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
The absolute position of a page element, which is the coordinate of the upper-left corner of the element relative to the upper-left corner of the page. This absolute position is calculated to get.
First, 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 II offsettop and Offsetleft properties)
The following two functions can be used to get the horizontal and vertical coordinates of the absolute position.
Copy Code code as follows:
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
The relative position of the page element, the coordinates of the upper-left corner of the element relative to the upper-left corner of the browser window.
With absolute position, it is easy to get the relative position, as long as the absolute coordinates minus the scrolling distance of the page scroll bar. 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 III ScrollTop and ScrollLeft properties)
Rewrite the two functions in the previous section accordingly:
Copy Code code as follows:
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
Copy Code code as follows:
var x= this.getboundingclientrect (). Left;
var Y =this.getboundingclientrect (). Top;
Plus the scrolling distance, you can get an absolute position.
Copy Code code as follows:
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.
