Element offsetoffsetA series of

Offset: we can dynamically obtain the position (offset), size, and so on of the element by using the offset series related attributes.

  • Gets the element distance with the location of the parent element
  • Get the size (width and height) of the element itself
  • The numbers returned are undivided

Offset Common attributes

offsetSeries of attributes role
element.offsetParent Returns the element’s parent element with positioning, or if none of the parent elements are positionedbody
element.offsetTop Returns the offset of the element above the parent element with positioning
element.offsetLeft Returns the offset of the element relative to the left border of the parent element with positioning
element.offsetWidth Returns the element itself includingpadding, border, width of the content area, the value returned without units
element.offsetHeight Returns the element itself includingpadding, border, height of content area, return value without unit

OffsetParent gets the parent element with a position, or if neither parent element is positioned, the body is returned; ParentNode returns the parent element of the most recent level

offsetandstyleThe difference between

offset style
offsetYou can get style values in any stylesheet styleOnly style values in inline style sheets are available
offsetThe values obtained by series are unitless style.widthYou get a string with units
offsetWidthcontainspadding+border+width style.widthThe obtained property does not containpaddingandbordervalue
offsetWidthProperty read-only property, can only be obtained but not assigned style.widthIs a read-write property that can be obtained or assigned
To get the element size position, use theoffsetA more appropriate To change the value of an element attribute, use thestylechange

Element viewable areaclientA series of

Client client side, we use the client series of related attributes to obtain the relevant information of the visual area of the element, through the client series of related attributes can dynamically get the size of the element border, the size of the element, etc

clientSeries of attributes 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 to includepaddingAnd the width of the content area, without borders, and the value returned without units
element.clientHeight Return itself to includepaddingAnd the height of the content area, without borders, and the number returned without units

Element scroll barscrollA series of

Scroll, we can use the related properties of the Scroll family to dynamically get the size and scrolling distance of the element (return values without units).

scrollSeries of attributes role
element.scrollTop Returns the top distance to be rolled up
element.scrollLeft Returns the distance to the left of the coil
element.scrollWidth Returns its actual width, without borders
element.scrollHeight Returns its actual height, without borders

scrollThe event

If the height (or width) of the browser is not enough to display the whole page, the scroll bar will automatically appear. When the scroll bar is rolled down, the height of the page is hidden, which is called the head of the page being rolled out. When the scroll bar is rolled, the Scroll event will be triggered

<div>It's a lot of stuff, so I'm not going to write it (it's a lot, at least enough to have a scroll bar)</div>
<! -- Scroll event: an event triggered when our scroll bar changes -->
<script>
    let div = document.querySelector('div');
    div.addEventListener('scroll'.function() {
        console.log(div.scrollTop);
    })
</script>
Copy the code

Summary of three series

Three series size comparison role Returns the value
element.offsetWidth Return itself to includepadding, border, width of content area, Returns a value without a unit
element.clientWidth Return itself to includepadding, the width of the content area, without borders Returns a value without a unit
element.scrollWidth Returns its actual width, without borders Returns a value without a unit
  • offsetSeries are often used to get the position of an elementoffsetLeft,offsetTop
  • clientSeries are often used to get element sizesclientWidth,clientHeight
  • scrollSeries are often used to obtain rolling distancescrollTop,scrollLeft
  • Page scrolling distance throughwindow.pageYOffsetStudent: Get, if it’s on the left sidewindow.pageXOffset