如何根据div内容高度动态判断是否隐藏show more按钮

DevOps 小满

2026-8-26

原有代码问题

基础语法错误：JS中if条件必须包裹在圆括号内，大于等于运算符是>=（你写的=>是箭头函数语法），且代码中存在未声明直接使用变量、赋值运算符=和比较逻辑混淆的问题，代码本身无法正常执行
取值逻辑错误：clientHeight返回的是元素当前可视区域的高度，溢出被隐藏的内容不会计入该值，判断内容是否超出容器最大高度需要用scrollHeight（元素包含所有溢出内容的总高度）；另外scrollHeight/clientHeight返回的是无单位的数值，拿它和字符串'530px'比较没有任何意义
元素获取缺失：代码中没有获取show more按钮的DOM节点，也没有设置按钮默认隐藏的基础样式
HTML规范错误：页面中存在两个相同的id="context"，id在页面中必须全局唯一，重复id会导致DOM选取异常
执行时序错误：如果JS在DOM渲染完成、容器内图片加载完成前执行，拿到的高度值会比实际值小，判断结果不准

正确实现代码

首先写基础CSS，给容器设置最大高度、按钮默认隐藏：

#ccontainer {
  max-height: 530px;
  overflow: hidden;
  /* 可选：展开收起动画 */
  transition: max-height 0.3s ease;
}
/* 展开状态样式 */
#ccontainer.expanded {
  max-height: none;
}
.showmore {
  display: none;
}
.showmore.show {
  display: inline-block;
}

修正后的HTML（把重复id改成class）：

<div class="ccontainer" id="ccontainer">
  <p class="context">content</p>
  <div class="img" id="cntimgcon">
    <img src="images/image2.jpg" id="cntimgp1">
  </div>
  <p class="context">content</p>
</div>
<button class="showmore">show more</button>

JS逻辑，等资源加载完成后计算高度，附带展开收起交互：

// 等页面所有资源（含图片）加载完成后再执行计算，避免高度取值不准
window.addEventListener('load', () => {
  const container = document.getElementById('ccontainer');
  const showMoreBtn = document.querySelector('.showmore');
  const MAX_CONTAINER_HEIGHT = 530;

  // 内容总高度大于设定的最大高度时，才显示按钮
  if (container.scrollHeight > MAX_CONTAINER_HEIGHT) {
    showMoreBtn.classList.add('show');
  }

  // 点击按钮切换展开/收起状态
  showMoreBtn.addEventListener('click', () => {
    const isExpanded = container.classList.toggle('expanded');
    showMoreBtn.textContent = isExpanded ? 'show less' : 'show more';
  })
})

关键说明

判断内容是否溢出容器固定高度，必须用scrollHeight和设定的高度阈值比较，clientHeight、offsetHeight都无法拿到被overflow隐藏的内容高度
容器内包含图片、异步加载内容时，一定要等对应资源加载完成后再计算高度，否则会出现判断错误
如果后续有动态往容器里加内容的场景，内容更新后需要重新执行一次高度判断逻辑，更新按钮显示状态

内容的提问来源于stack exchange，提问作者user19520525