Question

我需要获取变量高度和宽度元素#sentence的尺寸，以便更改与其相关的其他元素的尺寸。 #sentence位于浏览器窗口的中心位置，无论其内容是什么，都会确定其高度和宽度。我的代码如下所示：

HTML

<body>
    <div id="wrapper">
        <div id="cell">
            <span id="sentence">
                sentence
            </span>
        </div>
    </div>
</body>

CSS

body, html  {
    font-size: 18pt;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#wrapper    {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
#cell   {
    display: table-cell; vertical-align: middle;
}

#sentence   {
    display: inline-block;
    background-color: #abc;
    padding: 1em;
}

JS

$(document).ready(function(){
    var h = $("#sentence").height();
    alert(h);
});

当我尝试获取.height()的{{1}}或.width()时，我会找回不一致的值。通常对于28的高度，但有时它会回到19.对于宽度，我得到84或有时52。

我认为可能差异是由于滚动条暂时出现然后在页面加载时消失。我尝试将#sentence添加到overflow: hidden;和html以删除可能正在显示的任何滚动条，但这不起作用。我也尝试过添加

body

那不起作用。使用$(window).resize(function(){ h = $("sentence").width(); });似乎也无效。

那会是什么？我为什么遇到这个问题？在此先感谢您的帮助。

Answer 1

要使尺寸正确，浏览器需要布局并呈现页面。 <{1}}事件被触发后，情况不一定如此。

请尝试使用.ready(...)。

span标记上的jquery .height（）和.width（）会得到不一致的结果

1 个答案: