javascript - 为什么在页面首次加载时无法在 backbone 中获取元素的大小？

Question

在 CSS 中，元素的高度和宽度设置为自动。我想在页面首次加载后获取此元素的高度。我检查了$('#minor')，确实有clientHeight: 333, clientWidth: 826，但无法获取clientHeight、clientWidth、offsetHeight和offsetWidth的值。但是，我可以正确获取 $('#minor') 的其他属性。

顺便说一句，我可以获得#gallery 和#image_holder 的clientWidth，尽管它们的宽度也设置为auto。

对于clientHeight，无法正确获取所有元素的clientHeight，总是返回20

主干 View 代码:

var SubheaderView = Backbone.View.extend({
    id: 'gallery',
    tagName: 'div',

    initialize: function() {
        $(window).on('resize', this.updateCss); #=> it works correctly
        this.render();
    },

    render: function() {
        this.$el.append(subheaderTemplate);
        var that = this;
        _.defer(function(){
            that.updateCss();
        });

        return this;
    },

    updateCss: function() {      
        console.log($('#minor')[0].clientHeight); #=> it still return 20
        console.log($('#minor')[0].clientWidth); #=> it still return 0
        console.log($('#minor')[0].localName); #=> it return div
    }
});

subheaderTemplate html代码:

<div id="image_wrapper">
    <div id="image_holder">
        <div class="image_item" id="major">
            <img src="media/images/test/image1.png" alt="major image">
        </div>

        <div class="image_item" id="minor">
            <img src="media/images/test/image2.png" alt="minor image">

            <div id="cover">
                <h1>Over 196 Homes<br>Sold a Week<br>Through Real Estate</h1>
            </div>
        </div>

        <div class="image_item">
            <img src="media/images/test/image3.png"alt="image">
        </div>
        <div class="clearfix"></div>
    </div>
</div>

CSS 文件:

#gallery {
    margin-top: 1px;
    width: auto;
    height: auto;
    background-color: #fefefe;
}

#image_wrapper {
    width: 87%;
    height: auto;
    margin: 0px auto 0px auto;
    overflow: visible;
}

#image_holder {
    width: auto;
    height: auto;
}

#image_wrapper .image_item {
    position: relative;
    width: auto;
    height: auto;
    float: left;
    background-color: blue;
    border: none;
}

#minor {
    overflow: hidden;
}

#image_wrapper img {
    width: 100%;
    border: none;
}

#cover {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 337px;
    background-color: #101010;
    background-color: rgba(16,16,16,0.7);
}

#cover h1 {
    color: #b7aeab;
    line-height: 97%;
    font-size: 33px;
    padding: 133px 0px 0px 39px;
}

Answer 1

高度和宽度的计算基于其他元素，因此我相信浏览器在加载更多页面之前无法告诉您它们。即使是 defer 也可能不足以延迟，因为它只有 1 毫秒。

你有没有试过把你的高度检查代码放在 $ block 中，像这样？

$(function() {
    alert($('#minor').height());
});

如果没有，我会尝试，甚至可能:

$('body').on('load', function() {
    alert($('#minor').height());
});