offset方法的BUG

最新推荐文章于 2021-05-28 10:36:30 发布

梁什么鸭，

最新推荐文章于 2021-05-28 10:36:30 发布

阅读量128

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Lm_choose_live/article/details/116454111

版权

Javascript 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

本文探讨了CSS中offsetHeight属性的误解及其导致的高度变化问题，通过实例解释为何加上border会导致高度增加，并提供两种避免该问题的方法：使用行内样式和currentStyle/getComputedStyle获取真实尺寸。

摘要由CSDN通过智能技术生成

问题

先举个栗子：

<style>
    div {
      width: 100px;
      height: 100px;
      background: #dda1f8;
    }
  </style>

  <script>
    window.onload = function () {
      var oDiv = document.getElementById('div');

      setInterval(function () {
        oDiv.style.height = oDiv.offsetHeight - 1 + 'px';
      }, 30)
    };
  </script>

运行结果为物体的高在减小

再给div的样式表添加 border: 1px solid;

再运行发现物体的高在增加

原因是因为offsetHeight得到的不仅仅是width的值，而是 width + border + padding 的值
所以这里的offsetHeight = width + border*2(左右边框) - 1，那么定时器每执行一次，offsetHeight的值+1，所以物体的高会增加

解决

1、不用offsetHeight，而在div设置行间样式

2、currentStyle、 getComputedStyle() 获取非行间样式

<script>
    window.onload = function () {
      var oDiv = document.getElementById('div');

      function getStyle(obj, name) {
        if (oDiv.currentStyle) {
          return oDiv.currentStyle[name];
        }
        else {
          return getComputedStyle(obj, false)[name];
        }
      }

      setInterval(function () {

        oDiv.style.height = parseInt(getStyle(oDiv, 'height')) - 1 + 'px';
      }, 30);
    };
  </script>