Fatal编程技术网
  • javascript/
  • Javascript jQueryCSS方法没有'；不要更改高度元素

Javascript jQueryCSS方法没有'；不要更改高度元素

javascript jquery html css

Javascript jQueryCSS方法没有'；不要更改高度元素,javascript,jquery,html,css,height,Javascript,Jquery,Html,Css,Height,我有一个包含一些元素的网格。这些元素具有类项。当我点击其中一个元素时，我点击展开来调整该元素的大小 <body> <div class="grid"> <a href="#"> <div class="item" style="background-image: url('https://i.giphy.com/l0NwI1oBNxYfoRRny.gif'); hei

我有一个包含一些元素的网格。这些元素具有类
项
。当我点击其中一个元素时，我点击
展开
来调整该元素的大小

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

.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');
 });
因此，
宽度
的大小调整为父级大小的100%（
网格
），但
高度
不会改变

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

单击第三个元素后

问题是：在我尝试添加的同一个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');
       }
}
但是
高度
和
宽度
不变。因此，由于某种原因，此
$（'.expand'）.css（）
方法没有添加新值。

因为您已将
height
定义为
的内联样式。item
和内联样式将覆盖外部样式表中的样式。将
高度
移动到
。项目
或使用
！重要信息
在
中使用
高度
。展开

$（“.item”）。单击（函数（）{
$（this.toggleClass（“展开”）；
});

.item{
颜色：白色；
显示：表格；
字号：1.4em；
文本对齐：居中；
保证金：5px；
宽度：270px；
}
.扩大{
过渡：宽度0.5s，高度0.5s，左侧0.5s，顶部0.5s；
-webkit过渡：宽度0.5s，高度0.5s，左侧0.5s，顶部0.5s；
身高：100%！重要；
宽度：100%；
左：0！重要；
排名：0；
z指数：99；
文本缩进：-9999px；
}



...

删除内联样式
高度：202px从div.item添加
高度：202px
到css类
。item

内联样式比样式表更重要。这就是为什么不应用展开的原因


首先，我认为最好在CSS中指定指针，而不是使用
它可能是问题的一部分

其次，您可以有一个隐藏的
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>


和风格展示


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



这是一个不会每次都弄乱页面的选项…
问题是每个
项
元素必须以内联样式定义高度。我试着这样做，
$（'.expand'）.css（$（'.grid'）.width（）*height/width）+'px！important'）但不起作用。如果我尝试这个
！重要
在
宽度上
它不太起作用
$（'.expand'）.css（'width'，'50%！important'）
@AlbertoCrespo
！重要提示
工作正常-更新了我的答案。

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