Use native js to get correct page Parameters

This is a summary log. The purpose is to use native js to obtain the absolute and relative coordinates of the page's total width, height, coordinate in the upper left corner, and mouse placement.

Compatible browsers include IE6, IE8, ff4, chrome 10, Safari 5, and opera 11.

Explain why chrome and Safari versions earlier are not tested. First, because their previous versions have not changed much in this regard and are basically backward compatible. Second, these browsers have a low share and usage in China.

The following is a summary:

Objective: To obtain the total page width

Document. Body. scrollwidth: all are correct

Document.doc umentelement. scrollwidth: All correct

Document. Body. clientwidth: all are correct

Purpose: To obtain the total page height

Document. Body. scrollheight: All except IE are correct.
Document.doc umentelement. scrollheight: All correct
Document. Body. clientheight: all are correct

It seems that the same batch of attributes are inconsistent in height and width.

Objective: To obtain the window width

Self. innerwidth: Except the IE series, they are all correct.

Document.doc umentelement. clientwidth: all are correct

Objective: To obtain the window height

Self. innerheight

Document.doc umentelement. clientheight

The test results are the same as above, and the second one is all correct.

Objective: To obtain the absolute coordinate top in the upper left corner of the window

Document. Body. scrolltop: the WebKit kernel browser is correct.

Document.doc umentelement. scrolltop: Other kernel browsers are correct.

These two attributes are defined in all browsers, but one is correct and the other is always 0. Use the value of math. Max.

Objective: To obtain the absolute coordinate left in the upper left corner of the window

Document. Body. scrollleft

Document.doc umentelement. scrollleft

The result is the same as above.

Objective: To obtain the coordinates x, y

There is no dispute. Use event. clientx.

Objective: To obtain the coordinates x, y

Event. offsetx: Except ff, all others are correct.

Event. pagex: All except the IE series are correct

--------------------- Summary split line -------------------------

 

Page = {
Width: document.doc umentelement. clientwidth,
Height: document.doc umentelement. clientheight,
Totalwidth: document.doc umentelement. scrollwidth,
Totalheight: document.doc umentelement. scrollheight,
Top: math.max(document.body.scrolltop,document.doc umentelement. scrolltop ),
Left: math.max(document.body.scrollleft,document.doc umentelement. scrollleft)
};

 

 

 

You may find that other similar tests on the Internet have different conclusions. Other test conclusions may use more complex conditions for some values. They are not necessarily right or wrong, and I just did a test in all my browsers to ensure that their values are consistent in my browsers.

 

Therefore, the conclusion is for reference only.

 

/**
* Obtain the coordinate points of an element.
* @ Param elementid element ID
* @ Returns coordinate point where the element is located
*/
Function getelementpos (elementid)
{
VaR UA = navigator. useragent. tolowercase ();
VaR isopera = (UA. indexof ('Opera ')! =-1 );
VaR isie = (UA. indexof ('msie ')! =-1 &&! Isopera); // not opera Spoof
VaR El = Document. getelementbyid (elementid );
If (El. parentnode = NULL | El. style. Display = 'None ')
{
Return false;
}
VaR parent = NULL;
VaR Pos = [];
VaR box;
If (El. getboundingclientrect) // IE
{
Box = El. getboundingclientrect ();
VaR scrolltop = math.max(document.doc umentelement. scrolltop, document. Body. scrolltop );
VaR scrollleft = math.max(document.doc umentelement. scrollleft, document. Body. scrollleft );
Return {X: box. Left + scrollleft, Y: box. Top + scrolltop };
}
Else if (document. getboxobjectfor) // Gecko
{
Box = Document. getboxobjectfor (EL );
VaR borderleft = (El. style. borderleftwidth )? Parseint (El. style. borderleftwidth): 0;
VaR bordertop = (El. style. bordertopwidth )? Parseint (El. style. bordertopwidth): 0;
Pos = [box. X-borderleft, box. Y-bordertop];
}
Else // safari & Opera
{
Pos = [El. offsetleft, El. offsettop];
Parent = El. offsetparent;
If (parent! = El)
{
While (parent)
{
Pos [0] + = parent. offsetleft;
Pos [1] + = parent. offsettop;
Parent = parent. offsetparent;
}
}
If (UA. indexof ('Opera ')! =-1 | (UA. indexof ('safari ')! =-1 & El. style. Position = 'absolute '))
{
Pos [0]-= Document. Body. offsetleft;
Pos [1]-= Document. Body. offsettop;
}
}
If (El. parentnode)
{
Parent = El. parentnode;
}
Else
{
Parent = NULL;
}
While (parent & parent. tagname! = 'Body' & parent. tagname! = 'Html ') {// account for any scrolled ancestors
Pos [0]-= parent. scrollleft;
Pos [1]-= parent. scrolltop;
If (parent. parentnode)
{
Parent = parent. parentnode;
}
Else
{
Parent = NULL;
}
}
Return {X: POS [0], Y: POS [1]};
}

This is a summary log. The purpose is to use native js to obtain the absolute and relative coordinates of the page's total width, height, coordinate in the upper left corner, and mouse placement.

Compatible browsers include IE6, IE8, ff4, chrome 10, Safari 5, and opera 11.

Explain why chrome and Safari versions earlier are not tested. First, because their previous versions have not changed much in this regard and are basically backward compatible. Second, these browsers have a low share and usage in China.

The following is a summary:

Objective: To obtain the total page width

Document. Body. scrollwidth: all are correct

Document.doc umentelement. scrollwidth: All correct

Document. Body. clientwidth: all are correct

Purpose: To obtain the total page height

Document. Body. scrollheight: All except IE are correct.
Document.doc umentelement. scrollheight: All correct
Document. Body. clientheight: all are correct

It seems that the same batch of attributes are inconsistent in height and width.

Objective: To obtain the window width

Self. innerwidth: Except the IE series, they are all correct.

Document.doc umentelement. clientwidth: all are correct

Objective: To obtain the window height

Self. innerheight

Document.doc umentelement. clientheight

The test results are the same as above, and the second one is all correct.

Objective: To obtain the absolute coordinate top in the upper left corner of the window

Document. Body. scrolltop: the WebKit kernel browser is correct.

Document.doc umentelement. scrolltop: Other kernel browsers are correct.

These two attributes are defined in all browsers, but one is correct and the other is always 0. Use the value of math. Max.

Objective: To obtain the absolute coordinate left in the upper left corner of the window

Document. Body. scrollleft

Document.doc umentelement. scrollleft

The result is the same as above.

Objective: To obtain the coordinates x, y

There is no dispute. Use event. clientx.

Objective: To obtain the coordinates x, y

Event. offsetx: Except ff, all others are correct.

Event. pagex: All except the IE series are correct

--------------------- Summary split line -------------------------

 

Page = {
Width: document.doc umentelement. clientwidth,
Height: document.doc umentelement. clientheight,
Totalwidth: document.doc umentelement. scrollwidth,
Totalheight: document.doc umentelement. scrollheight,
Top: math.max(document.body.scrolltop,document.doc umentelement. scrolltop ),
Left: math.max(document.body.scrollleft,document.doc umentelement. scrollleft)
};

 

 

 

You may find that other similar tests on the Internet have different conclusions. Other test conclusions may use more complex conditions for some values. They are not necessarily right or wrong, and I just did a test in all my browsers to ensure that their values are consistent in my browsers.

 

Therefore, the conclusion is for reference only.

 

/**
* Obtain the coordinate points of an element.
* @ Param elementid element ID
* @ Returns coordinate point where the element is located
*/
Function getelementpos (elementid)
{
VaR UA = navigator. useragent. tolowercase ();
VaR isopera = (UA. indexof ('Opera ')! =-1 );
VaR isie = (UA. indexof ('msie ')! =-1 &&! Isopera); // not opera Spoof
VaR El = Document. getelementbyid (elementid );
If (El. parentnode = NULL | El. style. Display = 'None ')
{
Return false;
}
VaR parent = NULL;
VaR Pos = [];
VaR box;
If (El. getboundingclientrect) // IE
{
Box = El. getboundingclientrect ();
VaR scrolltop = math.max(document.doc umentelement. scrolltop, document. Body. scrolltop );
VaR scrollleft = math.max(document.doc umentelement. scrollleft, document. Body. scrollleft );
Return {X: box. Left + scrollleft, Y: box. Top + scrolltop };
}
Else if (document. getboxobjectfor) // Gecko
{
Box = Document. getboxobjectfor (EL );
VaR borderleft = (El. style. borderleftwidth )? Parseint (El. style. borderleftwidth): 0;
VaR bordertop = (El. style. bordertopwidth )? Parseint (El. style. bordertopwidth): 0;
Pos = [box. X-borderleft, box. Y-bordertop];
}
Else // safari & Opera
{
Pos = [El. offsetleft, El. offsettop];
Parent = El. offsetparent;
If (parent! = El)
{
While (parent)
{
Pos [0] + = parent. offsetleft;
Pos [1] + = parent. offsettop;
Parent = parent. offsetparent;
}
}
If (UA. indexof ('Opera ')! =-1 | (UA. indexof ('safari ')! =-1 & El. style. Position = 'absolute '))
{
Pos [0]-= Document. Body. offsetleft;
Pos [1]-= Document. Body. offsettop;
}
}
If (El. parentnode)
{
Parent = El. parentnode;
}
Else
{
Parent = NULL;
}
While (parent & parent. tagname! = 'Body' & parent. tagname! = 'Html ') {// account for any scrolled ancestors
Pos [0]-= parent. scrollleft;
Pos [1]-= parent. scrolltop;
If (parent. parentnode)
{
Parent = parent. parentnode;
}
Else
{
Parent = NULL;
}
}
Return {X: POS [0], Y: POS [1]};
}