Question

我在更新div高度后更新了其中的元素时出现问题。

基本上我有三个文件：

的index.html：

  <!DOCTYPE html>
    <head>
    <title>Template1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery.js"></script>
    <script src="respond.js"></script>
    </head>
    <body>
    <div id="wrapper">
    <img class= "img_center_big" src = "img.png">
    </div>
    </body>
    </html>

的style.css：

body
{
    width:100%;
}

img
{
    max-height:1000px;
}

#wrapper
{
    background-color: yellow;
    display: block;
    margin: 0 auto;

}

respond.js：

 $("#wrapper").ready(function(){
  console.log($("#wrapper").height());
  $("#wrapper .img_center_big").width($("#wrapper").width() * 0.9 );
  $("#wrapper").height("auto");
  console.log($("#wrapper").height());
 });

问题在于，$("#wrapper").height()即使在更改后也是如此。这有什么解决方案吗？我环顾四周，但找不到答案。

我希望在使用jQuery更改组件之后获得div的高度。

编辑：在帖子中更改了文件名，输入了错字。

Answer 1

他是对的，你没有改变height（）值。您可以迭代DIV中的所有元素，并将DIV的新高度设置为其中所有子元素高度的总和。

根据你所展示的代码，我认为这将是一条稳定的路线。

var totalsum = 0;

$("#wrapper").ready(function(){       
   $("#wrapper").children().each(function(){
      totalsum = totalsum + $(this).height();
   });


   console.log($("#wrapper").height());
   $("#wrapper .img_center_big").width($("#wrapper").width() * 0.9 );

   if(totalsum > 0)
   {
      $("#wrapper").height(totalsum);
    }

   console.log($("#wrapper").height());
  });

这是基本的，但应提供这个想法。希望它有所帮助！

如何获得div的高度，在div中的元素维度被jQuery改变之后？

1 个答案: