This article will introduce offsetLeft, offsetTop, and offsetParent in js. If you are interested in this tutorial, please refer to it.
As a front-end development engineer, are you sure you really understand offsetLeft, offsetTop and offsetParent? Today, I will give you a detailed description of these three js features here. Of course, the first two of them have the same features, here I will only take the description of offsetLeft.
1. offsetLeft/offsetTop
The offsetLeft of any element on the page always locates the located element closest to it. If not, locate the element based on the Root Node body and obtain its left value, for example
| The Code is as follows: | Copy code |
<Div id = "div2"> Css: |
|
Location of div4 offsetLeft based on body: 10 + 10 + 10 = 30
If we change the css as follows:
| The Code is as follows: | Copy code |
Css: |
|
Location of div4 offsetLeft Based on div2: 10 + 10 = 20
The same applies to offsetTop.
2. offsetParent
In fact, offsetParent returns a located element closest to it. If not, the body is returned. Its concept is similar to offsetLeft.
3. Example: encapsulate a function to obtain the location of any element on the page
| The Code is as follows: | Copy code |
Var GetPosition = function (obj) |
|
IE6 and IE7 have a small bucket for offsetparentinterpretation. When the ancestor element is not a positioning element and the element is a positioning element, the document.doc umentElement will be returned. Otherwise, the document. body will be returned !!
| The Code is as follows: | Copy code |
<Body>
<Div id = "d">
<Div id = "f"> |
|
A. offsetParent> B
C. offsetParent> document. body
E. offsetParent> document. body (ie, 6, 7> document.doc umentElement)
According to this understanding, we can infer elemnt. offsetParent itself needs to constantly search for the parent element on the page until it finds the latest positioning element or document. body. When code is nested in multiple layers, you need to look up the unknown layers. Efficiency ~ Especially when elemnt. offsetParent element. offsetLeft element. offsetTop is referenced in Some browsers to calculate the page element location, the efficiency is very low.
Elemnt. offsetLeft elemnt. offsetTop
Summary: returns the relative location of elemnt. offsetParent.
PS: IE8, IE9 Preview, Opera, and IE6 in some situations. The values returned by IE7 include borderLeftWidth and borderTopWidth of elemnt. offsetParent.
| The Code is as follows: | Copy code |
<Style type = "text/css"> <Div id = "B"> |
|
Document. getElementByIdx ('A'). offsetLeft> 100
Document. getElementByIdx ('A'). offsetTop> 100
The above is the correct value, and 120 is returned in IE8 and Opera. If you make some changes to CSS of B, as shown below:
# B {position: relative; background: # E3EBF4; border: 20px solid #628DC0} remove width and height,
In ie6 and 7, a problem also occurs.
Ie6:
Document. getElementByIdx ('A'). offsetLeft> 120
Document. getElementByIdx ('A'). offsetTop> 100
Ie7:
Document. getElementByIdx ('A'). offsetLeft> 120
Document. getElementByIdx ('A'). offsetTop> 120
Therefore, in IE8, Opera, and IE6 IE7 in special cases, if elemnt. offsetParent element. offsetLeft element. offsetTop is used to calculate the page element position, the values of borderLeftWidth and borderTopWidth must be subtracted from each loop. Of course, this situation does not need to be considered except for Opera 9.2, because other browsers or later versions support getBoundingClientRect () to calculate and obtain the page element location. For more information, see getBoundingClientRect!
In the preceding Demo, in most cases, offsetLeft, offsetTop, left, and top values are equal, but when a has both the marging attribute, offsetLeft, offsetTop contains the marging value, so you need to pay attention when simulating the left top value!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
