offset is the element offset, which can dynamically get the size, position, etc. of the element

The commonly used attributes of offset are as follows:

It should be noted that the obtained distance is the position of the parent element with positioning, and the return value has no unit

element.offsetTop : The return value is the offset from the top margin of the positioned parent element
element.offsetLeft : The return value is the offset from the left margin of the positioned parent element
element.offsetWidth : The return value is its own width+padding+border , without units
element.offsetHeight : The return value is its own height + padding + border , without units
element.offsetParent : The return value is the parent element with positioning , if the parent is not positioned, it returns body

One: element.offsetTop:

The return value is the offset from the top margin of the parent element with positioning. If the parent does not set positioning, the output distance is the distance from the top border of the body. If there is positioning, it is the offset from the top margin of the parent element with positioning. shift

1. For parent elements without positioning, the return value is the offset from the border on the body

 <style>
    .father{
      margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin-top: 45px;
      margin-left: 45px;
      background-color: rgb(230, 227, 227);

    }

    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetTop);
  </script>
</body>

2. If there is a parent element with positioning set, the return value is the offset from the top margin of the parent element with positioning set

 <style>
    .father{
      position: relative;
      margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin-top: 45px;
      margin-left: 45px;
      background-color: rgb(230, 227, 227);

    }

    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetTop);
  </script>
</body>

一：element.offsetLeft：

The return value is the offset from the left margin of the positioned parent element. If the parent does not set positioning, the output distance is the distance from the left border of the body. If there is positioning, it is the offset from the left margin of the positioned parent element. shift

1. For parent elements without positioning, the return value is the offset from the left border of the body

<style>
      *{
        margin: 0px;
        padding: 0px;
      }
    .father{
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin: 45px;
      background-color: rgb(230, 227, 227);
    }


    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetLeft);
  </script>
</body>

1. For a parent element with positioning set, the return value is the offset from the left border of the parent element with positioning set

 <style>
      *{
        margin: 0px;
        padding: 0px;
      }
    .father{
      position: relative;
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin: 45px;
      background-color: rgb(230, 227, 227);
    }


    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetLeft);
  </script>
</body>

三：element.offsetWidth：

The return value is its own width + padding + border , without units

  <style>
    .father{
        padding: 20px;
        border: 10px solid;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }
    </style>
</head>
<body>
    <div class="father"></div>
  <script>
     var father=document.querySelector('.father');
     console.log(father.offsetWidth);
  </script>
</body>

四：element.offsetHeight：

The return value is its own height + padding + border , without units

  <style>
    .father{
        padding: 20px;
        border: 10px solid;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }
    </style>
</head>
<body>
    <div class="father"></div>
  <script>
     var father=document.querySelector('.father');
     console.log(father.offsetHeight);
  </script>
</body>

Five: element.offsetParent:

The return value is the parent element with positioning, or body if the parent is not positioned

1. The parent element is not positioned, and the return value is body

 <style>
    .father{
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin: 45px;
      background-color: rgb(230, 227, 227);
    }


    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetParent);
  </script>
</body>

1. The parent element has set the positioning, and the return value is the parent element with the positioning set.

 <style>
    .father{
      position: relative;
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 141, 141);
    }

    .son{
      width: 100px;
      height: 100px;
      margin: 45px;
      background-color: rgb(230, 227, 227);
    }


    .father::before,
    .father::after{
      content: '';
      display: table;
    }
    .father::after{
      clear: both;
    }
    </style>
</head>
<body>
    <div class="father">
      <div class="son"></div>
    </div>
  <script>
     var father=document.querySelector('.father');
     var son=document.querySelector('.son');
    console.log(son.offsetParent);
  </script>
</body>

Finally, let's take a look at the difference between offset and style:

offset：

You can get the style value of any style sheet
The resulting value is a unitless number
offsetWidth is its own width+padding+border
(Important) offsetWidth is a read-only property, it can only be acquired and cannot be assigned

style：

Only inline stylesheet style values can be obtained
The resulting value is a string with units
style.width is the width of the box, excluding padding and border
(Important) style.width is a readable and writable property, which can be obtained and assigned

It can be seen that it is more appropriate to use offset to get the value and style to change the value

element offset offset