Проверьте, соответствует ли style=»height: 0px»

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть несколько элементов с высотой встроенного стиля, назначенной с помощью скрипта. Мне нужно проверить, имеет ли элемент следующее: 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/

Комментарии:

1. Если высота может быть 0 , почему вы устанавливаете min-height: 10px ? Я думаю, что это то, что вызывает проблему. Кроме того, почему бы просто не скрыть элемент?

2. Ну, это не вызывает этой проблемы, но я вижу, что это вызывает проблему с тем, что вы пытаетесь сделать. jsfiddle.net/2qb4g6as

Ответ №1:

Работает следующее:

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

Комментарии:

1. Это так. Есть ли какой-нибудь способ не смешивать jQuery со стандартным JS?

2. if ($(this).attr(‘style’) == ‘height: 0px’) { также будет работать, но используйте по своему усмотрению.

Ответ №2:

Если у вас есть точный код и вы не можете изменить какой-либо HTML-код, вы можете выполнить сравнение строк здесь..

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

Проблема в том, что вы установили min-height значение 10px , которое находится в действии, поэтому, хотя вы 0px определили как inline, оно не переопределит ваш CSS, поскольку min-height определяется отдельно. Итак, либо вам нужно вызвать min-height: 0; inline, либо вы можете проверить, как указано выше. Обратите внимание, что .height() всегда будет возвращаться 10 , поэтому я использую this.style.height для получения значения, которое вы объявили встроенным, а не того, которое отображается.

ДЕМОНСТРАЦИЯ


Обратите внимание, что если HTML-код соответствует тому, которым вы поделились, вы также можете достичь вышеуказанного, например

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

ДЕМОНСТРАЦИЯ

Комментарии:

1. К вашему СВЕДЕНИЮ, запись $(this).get(0) функционально идентична записи this здесь

2. да, но я прочитал, что в OP требуется способ «jQuery», и поскольку @Rupinder уже ответил, поэтому я хотел предоставить какой-то другой синтаксис, который тоже подходит..

3. уверен, что оба варианта хороши и работают абсолютно одинаково, но если вы хотите получить доступ к style свойству на this , тогда кажется совершенно бесполезным переносить его в селектор jQuery, а затем обращаться к первому (и единственному) элементу в массиве селекторов.

4. @ChrisBarr хм, имеет смысл, позвольте мне изменить это 🙂 спасибо

Ответ №3:

  1. Ваша высота никогда не равна 0, потому что у вас есть min-height: 10px в вашем css.
  2. Вы можете напрямую использовать $(this).высота вместо доступа к объекту style. Он выдает числовое значение, и вы можете выполнить проверку 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>