Question

我创建了元素，给了元素一个宽度，但没有高度

然后输出clientHeight

输出：24

但是我在浏览器控制台中输出的是：763

下面的代码是最小，完整和可验证的示例：

<body>
    <style type="text/css">
        #wrap {
            position: relative;
        }
        .pic-flow {
            position: absolute;
            width: calc((100% - 30px) / 4);
        }

        .pic-flow img {
            width: 100%;
        }
    </style>

    <div class="wrap" id="wrap">

    </div>

    <script type="text/javascript">
        let url = "https://wx2.sinaimg.cn/large/6ad11a59ly1fz4x1zu7d5j212e0u0npf.jpg"

        let el = `<div class="pic-flow">
                                <img src=${url}></imgs>
                            </div>`

        document.querySelector('#wrap').innerHTML = el
        console.log(document.getElementById('wrap').children[0].clientHeight)

    </script>
</body>

如果图像仍未加载，则可以输出：0，对吧？

为什么clientHeiht更改为24，如何获取当前的clinetHeiht？

为什么函数输出的clientHeight值与浏览器控制台输出的值不同

0 个答案: