JavaScript Tutorial Series 46:js three series-Convenient offset family

1 Offset family

The word offset is itself-the meaning of offset, compensation, and displacement. JS in a set of convenient way to get the element size is the offset family;

2  The offset structure is described as:

3 Offset Common Properties

1 offsetwidth offsetheight Get the width and height of the object (own, unrelated to others)

Offsetwidth = Width+padding+border

2 offsetleft OffsetTop Returns the position to the left of the upper box (with positioning) if the parent is not positioned, the body will prevail

Offsetleft the father's border from his father's padding.

3 offsetParent:

-1 Returns the parent of the object (with positioning) if the parent element of the current element is not CSS-positioned (position is absolute or relative,fixed), offsetparent is body.

2 If there is a CSS anchor in the parent element of the current element (position is absolute or relative,fixed), Offsetparent takes the nearest parent element.

4 the difference between OffsetTop & Style.top

1 The biggest difference is that the OFFSETTOP can return to the left of the distance without locating the box. and Style.top can not

-2 OffsetTop Returns a number, and Style.top returns a string with a unit in addition to the number: px.

-3 OffsetTop Read Only, while Style.top can read and write.

4 If the top style is not specified for the HTML element, Style.top returns an empty string.

JavaScript Tutorial Series 46:js three series-Convenient offset family