Obtain the offsetTop and offsetLeft (For: IE5 + FF1) offset between any Html element and body. [_ javascript tips

Source: Internet
Author: User
Obtain the offsetTop, offsetLeft (For: IE5 + FF1) offset between any Html element and body. [problem:
How can I get the offset distance between any Html element and the body element on the page?

The offsetTop and offsetLeft attributes have different interpretations for IE, Opera, and Firefox:
IE5.0 +, Opera8.0 +: offsetTop, and offsetLeft are relative parent elements.
Firefox1.06: Both offsetTop and offsetLeft are relative to the body element.

Therefore:
(1) Use offsetTop and offsetLeft directly under FF to get the offset distance between any Html element and body element on the page;
(2) It is troublesome in IE and Opera:
You must first obtain all the Html elements between the Html element and the body element, calculate their offsetTop and offsetLeft, and then accumulate them.
That is, from the Html element to the body, if borderWidth is set for the CSS of an HTML element during the traversal process, then borderWidth is not included in offsetTop and offsetLeft -- therefore, in the traversal process, you need to add the following:
Obj. currentStyle. borderLeftWidth, obj. currentStyle. borderTopWidth

The following test code is compatible with IE5 and FF1 but is invalid in Opera8.

Instance code:




Code example: Get the offset distance between any Html element and body: offsetTop, offsetLeft



Related Article

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.