Question

我想显示一个div，它取决于某些宽度的div为100％时的条件。我想在.show_div div的宽度为100％时显示.main。

这就是我想要做的：

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

在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>

如果您在DOM中使用属性style来声明width，则可以在 css 中进行操作

.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>

Answer 2

那么您可以在这里使用纯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()返回所选div的px中的计算数字，因此它不会检查100％。

如果您要按照要求将div的width属性的值设置为'100％'，则此答案是正确的。

如果要检查div的计算宽度是否等于父级计算的宽度，则应该看到@לבנימלכה答案。

根据div样式显示div 100％

2 个答案: