首页 > 解决方案 > 根据 div 样式显示 div 100%

问题描述

我想显示一个 div,它取决于某些宽度的 div 为 100% 时的条件。我想显示div 的.show_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>

提前致谢

标签: javascriptjqueryhtmlcss

解决方案


使用 if 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 中使用属性来声明,你可以在css中做到这一点stylewidth

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


推荐阅读