2

我需要获取可变高度和宽度元素#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()or.width()时#sentence，我得到了不一致的值。通常高度为 28，但有时返回为 19。宽度为 84，有时为 52。

我认为差异可能是由于页面加载时滚动条暂时出现然后消失造成的。我尝试添加overflow: hidden;并删除任何可能出现的滚动条html，body但这没有用。我也尝试添加

$(window).resize(function(){ 
    h = $("sentence").width(); 
});

那没有用。使用.css("height")似乎也不起作用。

那么会怎样呢？为什么我有这个问题？提前感谢您对此的任何帮助。

4

1 回答 1

6

为了使尺寸正确，浏览器需要布局并呈现页面。.ready(...)当事件被触发时，这不一定是真的。

尝试$(window).load(...)改用。

于 2012-04-11T02:52:38.660 回答