为什么这个div高度返回0？

Question

我完全陷入了这一困境。 我正在尝试获取div的高度，但是尽管尝试了多种方法来解决该问题，但它始终返回0。 这是代码。

 document.addEventListener("DOMContentLoaded", function() { const topDrawer = document.querySelector('.drawer__container--top'); console.log(topDrawer.offsetHeight) }) 

  .drawer { &__container { width: 100%; position: absolute; width: 90%; background: white; height: 500px; // left: 50%; transition: all .3s ease-in-out; border-radius: 1rem; box-shadow: 0px 3px 15px rgba(0,0,0,0.2); z-index: 3; &--top { top: 0; // transform: translateY(-400px) translateX(-50%); } &--bottom { bottom: 0; transform: translateY(60vh) translateX(-50%); padding: 1rem 2rem; &.open { transform: translateY(8vh) translateX(-50%); } } } 

 <script type="module" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.esm.js"></script> <script nomodule="" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script> <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Actor&amp;display=swap" rel="stylesheet" /> <!-- This is the main body - every thing will go in here! --> <div class="main"> <div class="jp__header"> <div class="jp__header__textrel"> <div class="jp__header__textabs"> <h1>Journey Planner</h1> </div> <div class="jp__header__weatherabs"> <canvas id="icon2"></canvas> </div> <div class="jp__header__underline"></div> </div> </div> <div class="drawer drawer__container drawer__container--top"> </div> <div id="map"></div> <div class="drawer__container drawer__container--bottom"> <div class="drawer__search__wrapper"> <ion-toolbar class="drawer__search__toolbar" no-shadow=""> <ion-searchbar animated="" class="drawer__search__searchbar" mode="ios" placeholder="Enter a bus stop number..."></ion-searchbar> </ion-toolbar> </div> </div> </div> 

我试过了-将其包装在windo.addEventListener（“ load”，（）等）中，以及使用此'ready'函数：

function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

• 使用document.addEventListener（“ DOMContentLoaded”）

也没有任何浮动，但我尝试添加溢出：隐藏。

我正在使用webpack打包，但捆绑包恰好放在结束body标签之前。 我认为没有理由不返回500px的高度...希望您能提供帮助。

编辑：我也使用Django和模板-会影响它吗？

第二编辑：所应用的样式似乎略有延迟，如下面的@Thomas所检测。 应用设置的超时似乎可以使事情正常进行，所以我要继续进行下去……莫名其妙。

Answer 1

对此问题的答案是：非常感谢@ Tibrogargan，@ Thomas和@Diego帮助识别它。

问题是离子导入：

<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" />

直到获取该css文件后，脚本才会加载。 我已经通过在文档加载处理程序中添加2ms的setTimeout解决了该问题，但是还将研究如何在本地获取CSS或寻找其他解决方案。