Scrollwidth,clientwidth,offsetwiddth,innerwinth element Positioning

Source: Internet
Author: User

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

The generic gain element is relative to the viewport function, which traverses the parent element upward (because some browsers do not support the Getboundingclientrect method):
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;
}

function Getboundingclientrect (Element) {

var scrolltop = Document.documentElement.scrollTop;
var scrollleft = Document.documentElement.scrollLeft;

if (element.getboundingclientrect) {
if (typeof Arguments.callee.offset! = "number") {//fix IE8 and previous version from (2,2) coordinates start calculation
var temp = document.createelement ("div");
Temp.style.cssText = "position:absolute;left:0;top:0;";
Document.body.appendChild (temp);
Arguments.callee.offset =-temp.getboundingclientrect (). Top-scrolltop;
Document.body.removeChild (temp);
temp = null;
}
var rect = Element.getboundingclientrect ();
var offset = Arguments.callee.offset;
return {
Left:rect.left + offset,
Right:rect.right + offset,
Top:rect.top + offset,
Bottom:rect.bottom + Offset
};
} else {//for repairs that do not support getboundingclientrect
var actualleft = Getelementleft (Element);
var actualtop = getelementtop (Element);

return {
Left:actualleft-scrollleft,
Right:actualleft + Element.offsetwidth-scrollleft,
Top:actualtop-scrolltop,
Bottom:actualtop + element.offsetheight-scrolltop
}
}
}
Because Arguments.callee is used, it is not used in strict mode.

Scrollwidth,clientwidth,offsetwiddth,innerwinth element Positioning

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.