如何获取元素高度并根据高度为不同元素应用CSS样式？

AI 小北

2026-6-13

问题：批量调整多个同class元素的高度，将原高度减5px

需求：获取所有class为.card的元素，无论原高度是否超过400px，都将它们的高度设置为原高度减去5px。

用户尝试的代码：

JavaScript

jQuery(document).ready(function( $ ){
  
  var cardHeight = $('.card').height();
  
  if (cardHeight > 400) {
    $(this).height(cardHeight - 5);
    }
  else{
    $(this).height(cardHeight - 5);
  }
  
});

CSS

.wrapper {
  width: 100%;
  overflow: hidden;
}
.wrapper .card {
  width: 20%;
  float: left;
  margin: 10px;
  background-color: red;
}
.wrapper .card:nth-child(1) {
  height: 333px;
}
.wrapper .card:nth-child(2) {
  height: 333px;
}
.wrapper .card:nth-child(3) {
  height: 500px;
}
.wrapper .card:nth-child(4) {
  height: 500px;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
</body>

问题分析：

高度获取不全面：$('.card').height()仅返回第一个匹配元素的高度，无法拿到每个.card各自的高度值。
上下文指向错误：$(this)在当前回调中指向的是document对象，不是目标.card元素，导致高度设置无效。
冗余条件判断：if-else分支的执行逻辑完全一致，没必要做多余的条件判断。

修正后的代码：

jQuery(document).ready(function( $ ){
  // 遍历每个.card元素，逐个处理
  $('.card').each(function() {
    // 获取当前元素的原高度
    var originalHeight = $(this).height();
    // 设置新高度为原高度减5px
    $(this).height(originalHeight - 5);
  });
});