Js之offset属性与style属性的区别

Js之offset属性

offset翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置、大小等。
如果元素没有父级元素或者父级元素没有定位(祖先元素也可以)，则以body为父级
.offsetWidth和.offsetHeight 返回的宽和高是包括padding 内容区 border的，但是不包括margin。
所以获取的是元素的实际宽高 = width + border + padding.

注意：offsetTop 返回的是数字，不带单位。而 style.top 返回的是字符串，除了数字外还带有单位：“px”。

offset系列和style系列的区别

offse属性

1. offset 可以得到任意样式表中的样式值
2. offset 属性获取到的值是一个number类型，不带单位
3. offsetWidth，offsetHeight 包含padding+border+width
4. offsetWidth，offsetHeight 等属性是只读属性，只能获取不能赋值

所以，想要获取元素大小位置，用offset更合适。

Js之style属性

style属性

1. style 只能得到行内样式表中的样式值， offset都可以获得
2. style.width 获得的是带有单位的字符串（是字符串）
3. style.width 获得不包含padding和border 的值（获得的只是样式表里面写的width的值）
4. style.width 是可读写属性，可以获取也可以赋值
5. 最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有left top right
6. 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

所以，想要给元素更改值，则需要用style改变

代码加图加深理解

//css样式
  <style>
    div{
      height: 200px;
      width: 200px;
      background-color: blueviolet;
      margin: auto;
    }
  </style>

//html
  <!-- div盒子 -->
  <div>
    我是div
  </div>
  
//js
  <script>
    var div = document.querySelector("div");
    // 获取元素高度
    console.log(div.offsetHeight);
    // 获取元素宽度
    console.log(div.offsetWidth);
    //获取元素距离父级顶部的距离，这里div的父级是document元素
    console.log(div.offsetTop);
    //获取元素距离父级左边的距离，这里div的父级是document元素
    console.log(div.offsetLeft);

  </script>