Many beginners for JavaScript in the offset, scroll, client has been confused, although the Internet can be seen everywhere a picture (Figure 1), but this picture is too many too miscellaneous, and due to browser differences, the diagram is not entirely correct.
Figure A
I do not know how you see this picture of the first feeling, anyway, my feeling is "this time, how a disorderly word."
Since I think too much too messy, then I will offset, scroll, the client separately said, I hope to let everyone thoroughly understand, today only say offset.
First, about offset, we need to figure out whatW3 in the offset related page is: http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface
Here we can see that there are 5 things to figure out about offset:
1, OffsetParent
2, OffsetTop
3, Offsetleft
4, Offsetwidth
5, Offsetheight
Based on the degree of difficulty, we have divided the above 5 points into three categories to explain.
Before analyzing, let's take a look at the test code:
<body> <style type= "text/css" > body { border:20px solid #CCC; margin:10px; padding:40px; Background: #EEE; } #test { width:400px; height:200px; padding:20px; Background: #F60; border:5px solid #888; } </style> <div id= "test" ></div> <script> var test = document.getElementById ( "Test"); test.innerhtml = "<p>browser:" + navigator.useragent + "</p>" + "<p>offsetwidth:" + Test.offsetwidth + "</p>" + "<p>offsetheight:" +test.offsetheight+ "</p>" + "<p> Offsetleft: "+test.offsetleft+" </p> "+ " <p>offsettop: "+test.offsettop+" </p> "; </script></body>The effect of this code in each browser
Figure II (IE6/7)
Figure III (IE8/9/10)
Figure Four (Firefox)
Figure Five (Chrome)
Second, offsetwidth and offsetheightAs you can see, the above figure II-figure V in common is that offsetwidth and offsetheight are consistent, so here to the ground to speak.
An overview and description of the offsetwidth in the MDN is:
Returns the layout width of an element.
Typically, an element's is
offsetWidtha measurement which includes the element borders, the element horizontal padding, the ele ment Vertical scrollbar (if present, if rendered) and the element CSS width.
That is, the visible width of the element, which includes the bounding rectangle of the element (border), the horizontal padding, the vertical scrollbar width, the width of the element itself, and so on.
Offsetheight is similar to offsetwidth, except that the direction is changed vertically.
Just our example does not have a horizontal and vertical scroll bar. In addition, the test can be found that even if the element with a horizontal or vertical scrollbar, the value of offsetwidth and offsetheight will not change, because the browser renders the width (or height) of the scrollbar is calculated in the width (or height) of the element itself. The code and the values in the figure, we are not difficult to see:
Offsetwidth= (border-width) *2+ (padding-left) + (width) + (padding-right)
offsetheight= (border-width) *2+ (padding-top) + (height) + (padding-bottom)
The two concepts are summed up here, do you understand now?
Third, offsetleft and offsettopOne feature of Offsetwidth and offsetheight is that the values of these two properties are only relevant to that element, and are not related to the surrounding elements (parent and child elements).
However, Offsetleft and offsettop are not, these two properties are related to offsetparent, but before we talk about offsetparent, we don't care what offsetparent is and how we judge it, As long as we know Offsetleft and offsettop are related to offsetparent, the above example offsetparent is body.
The definition of Offsetleft on MSDN is:
Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offs Etparent Property
That is, the horizontal offset of the top-left vertex of the object that returns the bounds of the element relative to the upper-left corner of the offsetparent. From this definition, we can clearly know that offsetleft is related to the margin-left of the current element and the padding-left of offsetparent. In other words, it should be:
offsetleft= (offsetparent padding-left) + (offsetwidth of the middle element) + (Margin-left of the current element).
offsettop= (offsetparent padding-top) + (offsetheight of the middle element) + (Margin-top of the current element).
But we can see from the above example that when offsetparent is body, there are three values for offsetleft and offsettop, respectively: 40,IE8/9/10 in IE6/7 and 70 in Chrome, and 50 in Firefox.
With these values we can know that when the offsetparent is body, the situation is quite special:
In IE8/9/10 and chrome, offsetleft = (body's margin-left) + (body's border-width) + (body's Padding-left) + (Margin-left of the current element).
In Firefox, offsetleft = (body's margin-left) + (body's Padding-left) + (Margin-left of the current element).
Iv. offsetParentFinally to the offsetparent.
The Offsetparent property returns a reference to an object that is closest to the element that called offsetparent (closest to the containing hierarchy) and is a container element that has been positioned in CSS. If the container element is not positioned in CSS, the value of the Offsetparent property is a reference to the root element.
Overall two rules:
1. If the parent element of the current element does not have CSS positioning (position is absolute or relative), offsetparent is the body.
2. If there is a CSS anchor in the parent element of the current element (position is absolute or relative), offsetparent takes the nearest parent element.
The above example is the 1th one, let's verify that:
We changed JS to (add a line of code: Red part):
var test = document.getElementById ("test"); test.innerhtml = "<p>browser:" + navigator.useragent + "</p>" +< c0/> "<p>offsetparent:" + test.offsetParent.tagName + "</p>" + "<p>offsetwidth:" + Test.offsetwidth + "</p>" + "<p>offsetheight:" +test.offsetheight+ "</p>" + "<p> Offsetleft: "+test.offsetleft+" </p> "+ " <p>offsettop: "+test.offsettop+" </p> ";The effect of Firefox is:
Figure Six
In other browsers, the effect is the same, both body.
Let's check the 2nd article, and test the HTML as follows:
<! DOCTYPE html>In Firefox, the effect is:
Figure Seven
Offsetparent is also consistent in other browsers.
As we can see here, the formula for calculating the offsetleft given in the 3rd is applicable.
SummaryThe above summary hope to be helpful to everyone, after reading the content of this article and then back to look at the beginning of the article (see Offset) part of the section, is not clear a lot?
Finally, for the offsetparent body, now the mainstream browser IE8/9/10 and Chrome and Firefox are defined
offsetleft= (offsetparent padding-left) + (offsetwidth of the middle element) + (Margin-left of the current element).offsettop= (offsetparent padding-top) + (offsetheight of the middle element) + (Margin-top of the current element).
is not the same, I do not understand this point, if a friend knows please advise.
Excerpt from: http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
Front-end Siege Lion study Note nine: let you thoroughly understand the offset
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
