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>