HTML: width, height, htmlwidthheight

HTML: width, height, htmlwidthheight

 

During front-end page development, width (width, offsetWidth, scrollWidth, clientWidth) height (height, offsetHeight, scrollHeight, clientHeight) is the most confusing

Here is a special record:

 

 

 

1. offsetWidth width + padding + border)

The width of the current object.

Style. width is the width of the current object (width + padding + border ).

Difference: 1) the return value of style. width includes the unit px in addition to numbers;

2) if the object width is set to the percentage width, the page will become larger or smaller,

Both style. width return this percentage, while offsetWidth returns the width value of the object in different pages rather than the percentage value;

3) if the width style is not specified for the HTML element, style. width returns an empty string;

2. offsetHeight:(Height + padding + border)

The height of the current object.

Style. height is also the height of the current object (height + padding + border ).

Difference: 1) the return value of style. height includes the unit px in addition to numbers;

2) if the object height is set to the percentage height, the page will become taller or shorter,

This percentage is returned for style. height, while offsetHeight returns the object height value on different pages instead of the percentage value;

3) if the height style is not specified for the HTML element, style. height returns an empty string;

3. offsetLeft:

The distance from the current object to the left of its upper layer.

You cannot assign a value to the object. Use the style. left attribute to set the distance from the object to the left of the upper layer.

Style. left the distance from the current object to the left of its upper layer.

Difference: 1) style. left return values include not only numbers but also unit pixels;

2) If the distance from an object to the left of its upper layer is set to a percentage,

Style. left returns this percentage, while offsetLeft returns the value of the distance to the left of the upper layer;

3) if the left style is not specified for the HTML element, style. left returns an empty string;

4. offsetTop:

The distance from the current object to the top edge of the upper layer.

You cannot assign a value to the object. Use the style. top attribute to set the distance between the object and the top edge of the upper layer.

 

Style. top the distance from the current object to the top edge of the upper layer.

Difference: 1) style. top return values include not only numbers, but also units px;

2) if the distance between an object and the top edge of the upper layer is set to a percentage,

Style. top returns this percentage, while offsetTop returns the value of the distance to the top edge of the upper level;

3) if the top style is not specified for the HTML element, style. top returns an empty string;

Note: If the upper layer is the body, it is not true to specify whether to handle the following differences because IE and FF have different interpretations of padding and margin.

IE 1) if the parent layer of the Div is body, there is a div between the div and the body, such as body-> div-> divo; divo offsetTop = div padding + margin + boder;

2) If the parent layer of the Div is body, for example, body> divo; offsetTop of divo = padding + margin + boder of the div;

In divo, offsetTop = divo's margin> body. padding is divo's margin. Otherwise, it is body. padding. Who is the largest person?

FF: offsetTop = margin + padding;

(The default padding value for body in IE and FF is 10) in IE6.0 FF3.6.13

5. scrollWidth:Obtains the scroll width of an object.

6. scrollHeight:Obtains the scroll height of an object.

7. scrollLeft:Set or obtain the distance between the left-side boundary of the object and the leftmost side of the currently visible content in the object (width + padding)

8. scrollTop:Sets or obtains the distance between the top of the object and the top of the visible content in the object. (height + padding)

9. clientWidth:Obtains the width of the visible content of an object, excluding the scroll bar and border;

10. clientHeight:Obtains the height of the visible content of an object, excluding the scroll bar and border;

11. clientLeft:Get the border width of an object

12. clientTop: Get the border height of the object

13. offsetParent:The upper-level object of the current object.