检查样式是否为“高度：0像素”

Question

我有一些通过脚本分配的内联样式高度的元素。 我需要检查的元素具有以下内容： style="height: 0px"

<div class="myEm" style="height: 30px">...</div>
<div class="myEm" style="height: 10px">...</div>
<div class="myEm" style="height: 0px">...</div>

jQuery的

$(".myEm").each(function(){
   if ($(this).attr("style") == "0px") {
      $(this).css("border-color", "red");
   }
});

https://jsfiddle.net/p9nfskeL/1/

Answer 1

以下作品：

$(".myEm").each(function() {
  if (this.style.height == "0px") {
    $(this).css("border-color", "red");
  }
});

Answer 2

如果这是您所拥有的确切代码，并且您无法修改任何HTML，那么您可以在此处进行字符串比较。

$(".myEm").each(function() {
  if (this.style.height == '0px') {
    $(this).css("border-color", "red");
  }
});

问题是，您已经将min-height设置为10px ，因此，尽管您将0px定义为内联，但由于min-height是单独定义的，因此不会覆盖CSS。 因此，您需要调用min-height: 0; 内联，也可以像上面一样检查。 请注意， .height()将始终返回10因此请使用this.style.height来获取已声明为内联的值，而不是正在呈现的值。

演示

---

请注意，如果HTML与您共享的完全一样，则您也可以像

.myEm[style="height: 0px"] {
  border: 1px solid red;
}

演示

Answer 3

1. 您的高度永远不会为0，因为您的CSS中有min-height: 10px 。
2. 您可以直接使用$（this）.height而不是访问样式对象。 它给出一个数值，您可以如图所示进行NOT检查。

希望这会有所帮助！

 $(".myEm").each(function() { console.log($(this).height()) if (!$(this).height()) { $(this).css("border-color", "red"); } }); 

 .myEm { border: 1px solid #ccc; line-height: 20px; margin: 20px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="myEm" style="height: 30px">...</div> <div class="myEm" style="height: 10px">...</div> <div class="myEm" style="height: 0px">...</div>