$(document).ready() 内的 div 高度为零

Posted 2023-05-08

【中文标题】$(document).ready() 内的 div 高度为零

【英文标题】：div height is zero inside $(document).ready()

【发布时间】：2020-04-25 15:31:03

【问题描述】：

据我所知，如果我们在 $(document).ready() 中编写代码 JQuery 代码，那么代码将在 DOM 完全呈现后执行。

我正在尝试计算 $(document).ready() 中的 div 高度，但它返回零高度。 但是当我在浏览器的控制台中运行相同的代码时，它会返回正确的高度。

内容正在通过 Angularjs 加载。

jQuery：

$(document).ready(function ()
 // hide view more button if user bio content is less than 200 words
    var userBioLength = $('.userBioText > p').html().split(" ").length;
       if( userBioLength<=200)
       $('.userBioOverly').addClass("hide")
       $('.viewMore').addClass("hide")


    var textHeight = $(".userBioText").height();
    console.log(textHeight);  // return 0
    $('.userBioWrapper').css(height:textHeight + 10+'px');

HTML：

 <div class="userBioWrapper">
       <div class="userBioText">
            <p>
               userInfo.bio 
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
              </p>
       </div>
      <div class="userBioOverly"></div>
 </div>

我很好奇为什么这种行为不同。我是不是做错了什么？

【问题讨论】：

如果您通过 angularjs 加载内容，为什么不使用它的隐藏/显示功能呢？ （例如：ng-show）

如果我使用 ng-show 那么内容是否可见。但在这种情况下，我想修改 Div 的高度。

然后我会使用一个类来定义 div 的新高度，并根据文本长度的比较在 angularjs 中应用该类

我通过在类中使用 height: unset 做了同样的事情。但 IE 不支持 unset。所以只想尝试这种方法。

现在通过设置 height:auto 为我工作的 css 类。

【参考方案1】：

没有。

没有完全渲染，但是文档的事件ready，这意味着他从服务器下载了所有内容，包括原始html。

Angular js 实际上是在 jquery 就绪完成后启动...

如果你想在 ng 完成后做某事，你需要在你的控制器或指令中设置一个超时，通常，除非有一个 ng-for，它会在 0 毫秒等待的情况下工作

编辑： 更多解决方案here（比我自己的好..）

【参考方案2】：

它通过使用 css 类设置 Div 高度对我有用。在 css 类中，我正在设置 height:auto;.

css：

.unsetHeight  
    height: auto;
 

Jquery：

 var userBioLength = $('.userBioText > p').html().split(" ").length;
    if( userBioLength<=200)
        $('.userBioOverly').addClass("hide")
        $('.viewMore').addClass("hide")

        $('.userBioWrapper').addClass("unsetHeight");