The--offset family of JavaScript

In Javavscriprt, there are some very characteristic families, they are famous for the compatibility problem of the browser, some are famous because of its important role, in short, the understanding of these Pinyi family and solve their compatibility problems appear to be very cumbersome, This article is an introduction to the members of the family member of the offset family to do some simple understanding and compatibility issues. Then there will be other family introductions, hoping to help you with your study.

First of all we say offset, his Chinese meaning, is the offset, so we also call them "offset family", the family's main members have, OffsetParent,

Offsetwidth,offsetheight,offsettop,offsetleft. As for Offsetright and Offsetbottom, it is not mentioned in the standard document. "Offset Family" compatibility is really bad, every time we use to consider a lot of compatibility issues, such as offsetwidth in Internet Explorer and the main browser to calculate the size is different, as well as the Offsetleft property, which makes us a great headache.

It is important to note here that these properties of the so-called offset family are attributes of element and belong to the contents of the DOM.

Having said so many compatibility issues, let's look at how specifically these problems are caused.

(1) offsetParent

Because of the attributes of the element of the offset family, each element has the offsetparent attribute, which is used to obtain its own ancestor elements, and is the ancestor element that has been positioned, and to take precedence over the nearest element of the distance, if there is no ancestor element to locate, is the body for its reference, get the body tag.

Because Box2 reference box1 location positioning, so the content of the output is box1 content, then if the box2 ancestor element box1 No positioning, then the output is Boby content, which is for the advanced browser.

In IE6 and IE7 browsers, the result of this attribute is not what we imagined, and the compatibility problem came from it. Unlike other advanced browsers, it is mainly divided into the following situations.

(1) If you do not set their own positioning, then the offsetparent reference is the nearest ancestor element, but the requirement is that the ancestor element must be set wide and high, then if you do not locate the words, but the ancestor elements using positioning, even if not wide, also as a reference;

(2) If you have a location, it is the same as the advanced browser.

So in order to solve this problem, in the use of their own style to add positioning, so that the same as the advanced browser.

(2) Offsetleft

The property is used to obtain the distance from its own outer border, to the inner border of the offsetparent element of its own reference ancestor element, the compatibility problem of the offsetparent described earlier, is that the element we want to refer to does not affect our offsetleft is worth getting, it is worth mentioning that For IE8, his offsetparent property is the same as that of a high-level browser, but his Offsetleft property is calculated from his margin to the outer border of the offsetparent element, unlike other browsers.

Because of IE8 compatibility issues, it is best not to set a border for your reference parent container when styling. Remember the phrase "self-positioning, the father is boundless."

(3) Offsetwidth

Get the true width of the box, that is, left and right padding+ around border+width; his compatibility is very good, there is no compatibility problem. But there are a few notes;

1. If our box is not set to width, then the browser will calculate its own width, not so-called 100%;

Calculation formula: The width of the current page-margin;

The result of the apparent output is 1671=1661+5+5, where 1661 is the width of our page minus the Margin-left value.

(4) Offsetheight

Get the true height of the box, up and down paddin+ up and down border+height, same compatibility is good;

1. If the height is not set, his value will be calculated as well, and the height and row height and font size are determined by the content.

It is not difficult to see that his calculation results are given by the content, row height and padding values together.

Currentstyle.height; Gets the height, which is specific to IE and cannot be used by other browsers.

Offsetwidth and offsetheight differ from the client family of ClientWidth and ClientHeight, their main difference is the difference in calculation, and border has a great relationship. First of all, don't say much first.

(5) OffsetTop

Get the distance from your reference element, the distance from your margin to the inner margin of the reference element, there is no special problem, it is very simple.

(6) Characteristics of the family

1. This family attribute can only be used to get the content value, but not to modify the property value;

2. With the offset family element output, no units;

The members of the offset family are not difficult to understand, the most important here is the compatibility of several special members, master the "offset family" compatibility problem, there is no problem.

The--offset family of JavaScript