Summary of offset

Offset translates to offset. We can dynamically obtain the position (offset), size, and so on of the element using offset series related attributes

Note: The values returned do not have units

  • Get the size (width and height) of the element itself
  • Gets the offset of its element relative to the parent element with positioning

Offset series common attributes

Offset series attributes role
element.offsetTop Returns the upper offset of the element relative to the positioned parent element
element.offsetLeft Returns the left offset of the element relative to the positioned parent element
element.offsetWidth Returns itself including padding, border, width of content area, numeric value returned without units
element.offsetHeight Return itself including padding, border, height of content area, return value without units
element.offsetParent Returns the parent element with positioning applied to the element. If you keep going up without finding a parent with location, return body

Offset is different from style

offset

  1. The offset series obtains values without units
  2. OffsetWidth contain padding + border + width
  3. OffsetWidth is read-only and can only be obtained but cannot be assigned
  4. Offset can get the style value in any stylesheet
  5. So get the element’s ownThe size of the position, offset is more appropriate

style

  1. Style can only get style values from inline style sheets
  2. Style.width takes the value as a string with units
  3. Style.width gets a value that does not contain the padding and border
  4. Style. width is a read-write property that can be obtained or assigned
  5. So if you want to change the value of an element, you need to use stylet changes

Element viewable client family

Summary of the client

Client translates to client. You can dynamically obtain the size of the element’s border and the size of the element (excluding the border) through the client series of related attributes

Client properties role
element.clientTop Returns the size of the border on the element
element.clientLeft Returns the size of the left border of the element
element.clientWidth Return itself including padding, width of content area,Not including borders, returns a value without units
element.clientHeight Returns the height of its own content area, including padding,Not including borders, returns a value without units

Element scroll series

Scroll is translated as scroll, and the size and scrolling distance of the element can be dynamically obtained through the related properties of scroll

  • When the scrollbar appears, the height that is hidden when the page is scroll down is called the part of the page that is rolled out, and the scrollbar is triggered when it is scrollingScroll event
  • Note: The scroll header uses element.scrollTop, and the scroll header uses window.pageyOffset

Scroll properties role
element.scrollTop returnThe elementThe upper distance that is rolled away, returns a number without units
element.scrollLeft Returns the distance to the left of the element, without units
element.scrollWidth Returns the actual width of the element itself (including the width beyond the box), without borders, and without units
element.scrollHeight Returns the actual height of the element itself (including the height beyond the box), without borders, without units

Page volume page

Note: The scroll header uses element.scrollTop, and the scroll header uses window.pageyOffset

Page properties role
window.pageYOffset Access isPage sweptThe header, unlike scrllTop, is the element being rolled
window.pageXOffset Gets the left side of the page wrap, as opposed to scrllLeft, which is the element wrap

Summary of three series

The main uses of the three series

  • The offset family is often used to get the position of an elementoffsetTop,offsetLeft
  • The client family is often used to get the size of an elementclientWidth,clientHeight
  • The Scroll series is often used to get the scroll distance of an elementscrollTop,scrollLeft
Comparison of three series role
element.offsetWidth Returns the width of its own content, including padding,Including the borders. The value is returned without units
element.clientWidth Returns the width of its own content, including padding,Not including borders. The value is returned without units
element.scrollWidth Return the content beyond the element, including padding,Not including borders, returns a value without a unit.

Execute function immediately

  • Execute functions immediately (also called self-calling functions)
  • Main purpose: To create independent scope, avoid variable name conflict.
  1. (function(){}) ()
Copy the code
  2. (function(){} ())
Copy the code

Native JS (DOM manipulation) >-<

“Likes, favorites and comments”

❤️ follow + like + favorites + comments + forward ❤️, encourage the author to create a better article, thank 🙏 everyone.