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()のまたは.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 に答える