Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the role of offsetwidth in JS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The attribute offsetwidth can be said to be very useful. As the name implies, offset is translated as an offset, and its specific meaning can be seen from the name. That is, the offset of the element is equivalent to the parent element.

How's offsetwidth?

Offset roughly includes five parts: offsetTop, offsetLeft, offsetWidth, offsetHeight and offsetParent, which are translated bluntly as upper offset, left offset, offset width, offset height and offset parent. Although the translation is not appropriate, it can still reflect its general meaning.

OffsetTop: the offset of the element from above the parent element.

OffsetLeft: the offset of the element from the left border of the parent element.

OffsetWidth: it includes padding, border, and the width of the content area.

OffsetHeight: itself includes padding, border, and the height to which the content goes.

OffsetParent: the parent element that serves as the offset reference point.

What you should pay attention to in offsetwidth is:

1. Both offsetTop and offsetLeft are offsets relative to the inside of the border of the parent element. That is, the distance from the outside of the element border to the inside of the parent element border.

2. OffsetParent is not usually the direct parent element of the element, but refers to the parent element closest to the element that has been set to position (that is, position is not static), and the maximum number of queries is body. That is, if there is no position-set element in the parent element, the offsetParent of the body;position=fixed element is the offsetParent of the null;body element and the offsetParent of the null;body element is null.

3. Position is the element of fixed, and its offsetParent is null, but when calculating offsetTop and offsetLeft, you can think of them as browser viewports.

4. But for body whose offsetParent is also null, its offsetTop and offsetLeft are always 0.

5. All values have no unit px and can be used directly.

6. Native js has a function very similar to offset is getBoundingClientRect (), which can also obtain the element offset and width and height, in which the width and height are calculated in the same way, but when calculating the cheap amount, this function is always calculated relative to the browser viewport.

This is the end of the content of "what is the function of offsetwidth in JS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.