javascript - offsetheight 元素的奇怪行为

Question

我有一部分页面看起来像这样（我使用哈巴狗视图引擎）

<div class="product">
    <div class="name">#{product.product_name}</div>
    <div class="category">#{product.category}</div>
    <div class="description">
       | #{product.product_description}
    </div>
    <div class="amount">#{product.product_amount}</div>
    <div class="count-stock">#{product.product_count_stock}</div>
    <div>
       <a href="/editProductProperties?productId=#{product.product_id}">
           <img src="images/pencil-white.svg" class="pencil-icon icon" data-product_id="#{product.product_id}"/>
       </a>
       <img src="images/trash.svg" class="trash-icon icon"/>
    </div>
</div>

这部分的风格：

.product {
    display: grid;
    grid-template-columns: [name] 207px [category] 150px [description] 1fr [amount] 100px [count-stock] 100px [action] 54px;
}

.product > div:not(:last-child) {
    padding-right: 5px;
}

.product {
    padding: 20px 0;
    border-top: 1px solid #f2f2f2;
    position: relative;
}

.product::after {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-right: 100px solid transparent;
    position: absolute; 
}

.product .description {
    position: relative;
}

.product .description .showButton {
    position: absolute;
    top: 10px;
    right: 0;
    text-decoration: underline;
    cursor: pointer;
}

.product:last-child {
    border-bottom: 1px solid #f2f2f2;
}

.product:hover {
    background: #555454;
}

和js：

window.onresize = addShowButton;

function addShowButton() {
  productDescriptionList.forEach(el => {
    if(el.offsetHeight > 40) {
      if(el.children.length === 0) {
        let showButton = document.createElement('span');
        showButton.className = 'showButton';
        showButton.innerText = 'Показать полностью';
        el.append(showButton);
      }
      el.style["max-height"] = '40px';
      el.style.overflow = 'hidden';
    } else if(el.offsetHeight <= 40) {
      el.style["max-height"] = 'initial';
      el.style.overflow = 'visible';
      if(el.children.length > 0) {
        el.children[0].remove();
      }
    }
  });
}

addShowButton();

问题是 el.offsetHeight 要么采用旧的元素高度值，要么采用所有样式之前的值。

也就是说，我在检查器中查看元素的高度值，它是 80，控制台中的 offsetHeight = 36，我不明白为什么会这样

标签： javascripthtmlcss