Javascript 计算浮动元素的宽度

例如，您可以在维基百科中看到： 第二个参数以“379万平方英里”开头。 如果您检查此pharagraph的宽度，它将为您提供完整的宽度，包括浮动右元素“.infobox”的宽度

但是我需要得到显示给用户的药典的确切宽度（这是药典宽度-信息框等等）。 但是，假设我不知道有一个浮动元素，我希望javascript计算上下文的确切显示宽度。 多谢各位

编辑： 以下是问题的一个示例：

---

在DOM中滚动得到的结果相同，但计算的witdh不同。

以下是使用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>

//所有的边缘和填充物
var w1=$（'.c_2'）。外径（真）；
var w2=$（'.c_3'）.width（）；
警报（'计算宽度：'+w2+'-'+w1+'='+（w2-w1））；
.c_1{
边框：1px纯红；
}
.c_2{
浮动：对；
宽度：22em；
高度：200px；
利润率：0px 20px；
填充：0px 20px；
边框：1p纯橙；
}
.c_3{
边框：1px纯蓝色；
}
Infopanel

某段


有趣的段落

以下是使用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>

//所有的边缘和填充物
var w1=$（'.c_2'）。外径（真）；
var w2=$（'.c_3'）.width（）；
警报（'计算宽度：'+w2+'-'+w1+'='+（w2-w1））；
.c_1{
边框：1px纯红；
}
.c_2{
浮动：对；
宽度：22em；
高度：200px；
利润率：0px 20px；
填充：0px 20px；
边框：1p纯橙；
}
.c_3{
边框：1px纯蓝色；
}
Infopanel

某段


有趣的段落

如果我知道每次我的内容中都有一个浮动div，那么这就行了。我的问题是我不知道。我只是循环浏览段落，并使用$（）.width（）等找到它们的宽度，这给了我段落的宽度，但没有给用户显示的宽度（因为我们有一个浮动元素打破了计算样式的宽度）。如果你不确定是否有浮动元素，你可以选择父元素，选择所有元素，有浮动的，计算它们在父对象中的位置，查找段落是否受浮动元素位置的影响，然后从段落宽度中减去它。这可能会变得非常棘手，如果你在链接中查找“大西洋海岸的沿海平原让位于内陆”，你也会看到，这一段实际上有两个宽度，因为它位于浮动集装箱的末端。我想这是唯一的解决方案。非常感谢。奇怪的是，我们无法得到段落的实际“计算”宽度。如果你找到另一个，我也会对解决方案非常感兴趣。：）如果我知道每次我的内容中都有一个浮动div，这就行了。我的问题是我不知道。我只是循环浏览段落，并使用$（）.width（）等找到它们的宽度，这给了我段落的宽度，但没有给用户显示的宽度（因为我们有一个浮动元素打破了计算样式的宽度）。如果你不确定是否有浮动元素，你可以选择父元素，选择所有元素，有浮动的，计算它们在父对象中的位置，查找段落是否受浮动元素位置的影响，然后从段落宽度中减去它。这可能会变得非常棘手，如果你在链接中查找“大西洋海岸的沿海平原让位于内陆”，你也会看到，这一段实际上有两个宽度，因为它位于浮动集装箱的末端。我想这是唯一的解决方案。非常感谢。奇怪的是，我们无法得到段落的实际“计算”宽度。如果你找到另一个，我也会对解决方案非常感兴趣。：）