JQuery CSS方法不会改变高度元素答案

【问题标题】：JQuery CSS method doesn't change the height elementJQuery CSS方法不会改变高度元素
【发布时间】：2017-07-20 01:53:39
【问题描述】：

我有一个包含一些元素的网格。这些元素具有类 item 。当我点击其中一个时，我使用 expand 调整该元素的大小。

  <body>
        <div class="grid">
              <a href="#">
                    <div class="item" style="background-image: url('https://i.giphy.com/l0NwI1oBNxYfoRRny.gif'); height: 270px; background-size: cover; background-repeat: no-repeat; position: absolute;">
                    </div>
              </a>   
              <a href="#">
                    <div class="item" style="background-image: url('https://i.giphy.com/pYI1hSqUdcBiw.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
                    </div>
              </a>   
              <a href="#">
                    <div class="item" style="background-image: url('https://i.giphy.com/l3vR58nYgtIUKua1G.gif'); height: 149px; background-size: cover; background-repeat: no-repeat; position: absolute;">
                    </div>
              </a>   
              <a href="#">
                    <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
                    </div>
              </a>   
               ...
        </div>
  </body>

CSS

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 270px;

}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100% ;
  width: 100%;
  left: 0 !important;
  top: 0 ;
  z-index: 99;
  text-indent: -9999px;
}

  $('.item').click(function () {
      $(this).toggleClass('expand');
 });

因此，width 调整为父大小 (grid) 的 100%，但 height 不会改变。

这是单击任何项目元素之前的网格视图

点击第三个元素后

所以，问题来了：在我尝试添加的同一个 JS 方法中：

  $('.item').click(function () {
         var height = $(this).height();
         var width = $(this).width();
         var act = $(this).hasClass("expand");
         if(act){
             $('.expand').css('height',Math.floor($('.grid').width()  * height / width) + 'px !important');
             $('.expand').css('width','50% !important');
       }
}

但height 和width 不会改变。所以，由于某种原因，这个$('.expand').css() 方法没有添加新值。

【问题讨论】：

标签： javascript jquery html css height

【解决方案1】：

因为您已将height 定义为.item 的内联样式，并且内联样式将覆盖来自外部样式表的样式。要么将height 移动到.item，要么在.expand 中使用!important 和height

$(".item").click(function() {
  $(this).toggleClass("expand");
});

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 270px;
}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100% !important;
  width: 100%;
  left: 0 !important;
  top: 0;
  z-index: 99;
  text-indent: -9999px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
  <div class="grid">
    <a href="#">
      <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;">
      </div>
    </a>
    <a href="#">
      <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif');  background-size: cover; background-repeat: no-repeat; position: absolute;">
      </div>
    </a>
    <a href="#">
      <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;">
      </div>
    </a>
    <a href="#">
      <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif');  background-size: cover; background-repeat: no-repeat; position: absolute;">
      </div>
    </a>
    ...
  </div>
</body>

【讨论】：

问题是每个item 元素必须已经定义了内联样式的高度。我试图这样做$('.expand').css('height',Math.floor($('.grid').width() * height / width) + 'px !important'); 但不起作用。如果我在width 上尝试这个!important 它也不起作用$('.expand').css('width','50% !important');。
@AlbertoCrespo !important 工作得很好 - 更新了我的答案。

【解决方案2】：

从 div.item 中删除内联样式 height: 202px; 并将 height: 202px 添加到 css 类 .item

内联样式比样式表更重要。这就是不应用 .expand 中的height: 100% 的原因。

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

【讨论】：

【解决方案3】：

首先，我相信在 CSS 中分配指针会更好，而不是使用 <a> 这可能是问题的一部分...

其次，您可以有一个隐藏的div Height:100% Width:100% 加载图像，然后出现在所有其他显示它的顶部。

<body>
    <div id="showDiv"></div>
    <div class="grid">
       <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div>
       <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div>
       <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div>
           ...
    </div>
</body>

然后

 $('.item').click(function () {
     var img = $(this).css("background-image");
     $('#showDiv').css({'background-image':img});
     $('#showDiv').show();
   }
}
$("#showDiv").click(function(){
     $(this).hide();
     $('#showDiv').css({'background-image':""});
});

and style showDiv

 #showDiv{
     display:none;
     height: 100%;
     widht: 100%;
     z-index: 999;
 }

这个选项不会每次都弄乱你的页面...

【讨论】：