2

たとえば、ここのウィキペディアで見ることができます: http://en.wikipedia.org/wiki/United_States 「379 万平方マイルで」で始まる 2 番目の段落。このパラグラフの幅を確認すると、フローティング右要素 '.infobox' http://imageshack.us/photo/my-images/38/54351130.jpg/の幅を含む全幅が得られます

しかし、ユーザーに表示されるファラグラフの正確な幅を取得する必要があります(これは、ファラグラフの幅-インフォボックスなどです)。ただし、フローティング要素があることを知らず、javascript でコンテクストの正確な表示幅を計算したいとします。ありがとうございました。

編集: ここに問題の例があります: http://jsfiddle.net/guy_l/sj3Zp/2/ DOM をスクロールしても同じ結果が得られますが、計算された幅は異なります。

4

1 に答える 1

0

これは、正常に機能する jQuery ソリューションを使用したシナリオです。

<script>

    // with all margins and paddings
    var w1  = $('.c_2').outerWidth(true);
    var w2  = $('.c_3').width();

    alert ('Calculated width: ' + w2 + ' - ' + w1 + ' = ' + ( w2-w1) );

</script>

<style>

    .c_1 {
        border:         1px solid red;
    }

    .c_2 {
        float:          right;
        width:          22em;
        height:         200px;
        margin:         0px 20px;
        padding:        0px 20px;
        border:         1p solid orange;
    }

    .c_3 {
        border:         1px solid blue;
    }

</style>

<div class="c_1">

    <div class="c_2">
        Infopanel
    </div>

    <p>
        Some paragraph
    </p>
    <p class="c_3">
        The interesting paragraph
    </p>

</div>
于 2012-06-24T09:59:04.870 に答える