Показать div на основе стиля div 100%

Question

Я хочу показать div, который зависит от условия, когда div некоторой ширины равен 100%.Я хочу показать .show_div, когда ширина .main div равна 100%.

Вот что я пытался сделать:

var x = $('.main');
if (x.width() == '100%' ) {
  $('.show_div').show();

}

.main {
  background: red;
  height: 50px;
  padding: 10px;
}

.show_div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="width:100%">&nbsp;</div>
<div class="show_div">
  I am visible bcz width 100%
</div>

Заранее спасибо

Answer 1

Ну, вы можете использовать чистый JavaScript здесь:

<div class="main" style="width:100%">&nbsp;</div>
<div class="show_div">
  I am visible bcz width 100%
</div>

var x = document.getElementsByClassName('main')[0];

if (x.style.width == '100%' ) {
  $('.show_div').show();

}

x.width() возвращает вычисленное число в px выбранного div, поэтому он не проверяет 100%.

Этот ответ верен, если вы хотите проверить, что значение свойства width элемента div установлено на «100%», как вы и просили.

Если вы хотите проверить, равна ли вычисленная ширина элемента divна вычисленную ширину родителя вы должны увидеть ответ @ לבנימלכה.

Answer 2

Используйте, если width == parent.width() означает 100%

 var x  = $('.main');

    if (x.width()== x.parent().width()){
        $('.show_div').show();

    }

.main{  background: red; height: 50px; padding: 10px;}
    .show_div{ display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="width:100%">&nbsp;</div>
<div class="show_div">
I am visible bcz width 100%
</div>

Вы можете сделать это в css , если вы используете атрибут style в DOM для объявления width

.main{  background: red; height: 50px; padding: 10px;}
.show_div{ display: none;}
.main[style="width:100%"]~.show_div{
display: block;
}

<div class="main" style="width:100%">&nbsp;</div>
    <div class="show_div">
    I am visible bcz width 100%
</div>