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”，（）等）中以及使用此“就绪”功能：

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或找到其他解决方案。

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

1 个答案: