javascript - 计算浮动元素的宽度

Question

例如，您可以在 wikipedia 中看到： http ://en.wikipedia.org/wiki/United_States 第二段以“379 万平方英里”开头。如果您检查此段落的宽度，它将为您提供全宽度，包括浮动右侧元素“.infobox”的宽度 http://imageshack.us/photo/my-images/38/54351130.jpg/

但我需要获得向用户显示的段落的确切宽度（即段落宽度 - 信息框等）。但是，假设我不知道有一个浮动元素，并且我希望 javascript 来计算 contect 的确切显示宽度。谢谢你。

编辑：这是问题的一个示例：http: //jsfiddle.net/guy_l/sj3Zp/2/ 滚动浏览 DOM 我得到相同的结果，但是计算出的 witdh 不同。

Answer 1

这是您使用 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>