Summary of offset

Offset translates to offset. We can dynamically obtain the position (offset) and size of the element by using 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
  • Note: The values returned do not have units

Offset series common attributes:

Offset series attributes role
element.offsetParent Returns the parent element with location as the element, or body if none of the parents are located
element.offsetTop Returns the offset of the element relative to the location above the parent element
element.offsetLeft Returns the offset of the element relative to the left border of the positioned element
element.offsetWidth Returns itself including padding, border, width of content area, and numeric value without units
element.offsetHeight Returns the height of itself, including the padding, border, and content area, without units

The sample code

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .grandfather {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px;
        background-color: cornflowerblue;
    }

    .father {
        position: absolute;
        width: 200px;
        height: 200px;
        margin: 50px;
        background-color: pink;
    }

    .son {
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 30px;
        padding: 10px;
        background-color: coral;
    }
</style>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
Copy the code

Commonly used attributes

offsetParent

  1. If the parent element is not positioned
console.log(son.offsetParent);
Copy the code

The output returns the element with location, and the body if not

  1. If the parent element has a location

The output is a parent element with positioning

offsetTop

Print offsetTop for father and son

  1. If the parent element is not positioned
console.log(grandfather.offsetTop); //100 console.log(father.offsetTop); / / 150Copy the code

If the parent element is not positioned, the distance to the body or positioned element is returned

  1. If the parent element has a location
console.log(grandfather.offsetTop); //100 console.log(father.offsetTop); / / 50Copy the code

If the parent element has a location, the distance to the parent element with the location is returned

offsetLeft

The same goes for offsetLeft and offsetTop. If the parent element is not positioned, the distance to the body or positioned element is returned, and if it is, the distance to the positioned parent element is returned.

  1. The parent element is not positioned

  1. The parent element has positioning

offsetWidth

The size returned by offsetWidth includes the width of the content area, padding, and border.

console.log(son.offsetWidth); / / 120Copy the code

offsetHeight

The size returned by offsetWidth includes the height of the content area, padding, and border.

console.log(son.offsetHeight); / / 120Copy the code

Offset and style

offset

  • Offset can be used to derive stylesheets from any stylesheet
  • The values obtained by the offset series are ununitless
  • OffsetWidth contain padding + border + width
  • Properties such as offsetWidth are read-only and can only be obtained but cannot be assigned
  • So, we want to get the size of the element, offset is more appropriate

style

  • Style can only get style values from inline style sheets
  • Styke.width gets a string with units
  • Style.width gets values that do not include padding and border
  • Style. width is a read-write property that can be obtained or assigned
  • So, if we want to change the value of an element, we need to use a style change