jQuery 检查 CSS 类的高度是否小于 20%

Question

好的，我有一个问题。

如果 CSS 类 #hunger .bg 小于 20% 高度，那么我只是想这样做 height: 20%; 然后它需要执行一段 jQuery 代码。

我现在有了这个，但它似乎不起作用!

if ($('#hunger .bg').css('height') < '20%') {
    alert('Less than 20% hunger');
}

Answer 1

您的问题是 .css('height') 返回的值类似于“20px”，您无法对其执行数学运算。只需使用 .height() 并通过简单的数学计算得出百分比。

let height = $('#hunger .bg').height() / $('#hunger').height() * 100;

if(height < 20){
  alert("Less than 20% hunger");
}

#hunger {
  height:100px;
}

div {
  background-color:lightgray;
  height:19%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="hunger">
  <div class="bg"></div>
</div>