Three pictures take you to understand the size of HTML elements

foreword

I don’t know if you have ever done tabsthe need for switching and scrolling linkage. I have encountered this need in previous projects, and then I randomly searched for a piece of code on Baidu and pasted it. Anyway, the function can be used. I didn’t really understand the code. Today I turned to the section of the element size in the red treasure book, and I wrote this article and recorded it.

element size

In fact, DOMthere is no regulation on the actual size of the element. The ancestral browser IEfirst added some attributes, and then got the support of mainstream browsers. They are offset size, client size, and scrolling size .

1. Offset size

The offset size is the visual space an element occupies on the screen, including the element's padding, scrollbars, and borders but excluding margins.
1. offsetWidthThe width occupied by the element in the horizontal direction, including the width, the width of the left and right borders, and if there is a vertical scroll bar, it should also be counted.
2. offsetHeightThe height occupied by the element in the vertical direction, including the height, the width of the upper and lower borders, and if there is a horizontal scroll bar, it should also be counted.
3. offsetTopThe distance between the top border of the element and the inner side of the top border of the parent element.
4. offsetLeftThe distance between the left border of the element and the inner side of the left border of the parent element.
It should be noted that these attributes are read-only and need to be recalculated every time they are accessed, so the number of uses should be minimized.

2. Client size

Client-side dimensions represent the space occupied by an element's content and padding. clientWidthIndicates element content width plus left and right margins, and clientHeightrepresents element height plus top and bottom margins.

3. Scroll size

The scrolling size provides information about the scrolling distance of the element. The relevant attributes are as follows:
1. scrollWidthThe overall width of the element, including the invisible part that cannot be displayed on the web page due to overflow. When there is no scroll bar, this attribute indicates the total width of the element content. 2. The
element scrollHeight's The overall height, including the invisible part of the webpage that cannot be displayed due to overflow. When there is no scroll bar, this attribute indicates the total height of the element content. 3. The hidden content at the top of the element, you can set the scroll
bar position by scrollTopchanging its value. Hidden content, you can set the scroll bar position by changing its value
scrollLeft

Remember these three pictures, and tabsyou don’t need to go to Baidu again when you encounter calculation scroll bars and linkage in the future.