Javascript/jQuery是否获取受浮动影响元素的真实宽度和位置？

是否可以（使用javascript或jQuery）获取受浮动影响的元素的宽度？当文本由于浮动图像而被推倒时，是否有可能获得其位置和真实宽度？为了更好地解释，我附上了一张图片

代码示例

<div>
    <img style="...float: left"/>
    <h1>A title!</h1>
    <p>Text!</p>
    <h1>New header added.</h1>
</div>

标题！
短信

添加了新标题。

我需要找到从箭头开始的宽度（灰色框是图像）（虚线是Firefox inspect模式下的宽度）

如果可能，我希望避免更改所有元素的显示类型。 谢谢大家!

首先，“全宽”就是真正的宽度

您可以观看这张图片，它可以帮助您理解为什么受影响元素的真实宽度和真实位置是firefox告诉您的方式

要获得内联文本被浮动图像向右推的宽度，除了使用全宽减去浮动图像的宽度外，没有其他好方法

var w = $('p').width() 
        - $('img').width() 
        - $('img').css('margin-left').replace("px", "")
        - $('img').css('margin-right').replace("px", "")
        - $('img').css('padding-left').replace("px", "")
        - $('img').css('padding-right').replace("px", "")
        - $('img').css('border-left-width').replace("px", "")
        - $('img').css('border-right-width').replace("px", "");

首先，“全宽”就是真正的宽度

您可以观看这张图片，它可以帮助您理解为什么受影响元素的真实宽度和真实位置是firefox告诉您的方式

要获得内联文本被浮动图像向右推的宽度，除了使用全宽减去浮动图像的宽度外，没有其他好方法

var w = $('p').width() 
        - $('img').width() 
        - $('img').css('margin-left').replace("px", "")
        - $('img').css('margin-right').replace("px", "")
        - $('img').css('padding-left').replace("px", "")
        - $('img').css('padding-right').replace("px", "")
        - $('img').css('border-left-width').replace("px", "")
        - $('img').css('border-right-width').replace("px", "");

---

我参加聚会有点晚了，但我也遇到了类似的问题，并提出了一个解决方案（到目前为止）似乎在这个问题的所有情况下都有效。我喜欢这个解决方案，因为据我所知，它是独立于浮动元素工作的——您所需要的只是想要获得其真实宽度/位置的元素，仅此而已。为了提高速度，我已经用纯Javascript实现了这一点，但是如果您愿意，可以使用jQuery和单独的CSS样式表简化它

//Get the rendered bounding box for the content of any HTMLElement "el"
var getLimits = function(el) {
    //Set a universal style for both tester spans; use "!important" to make sure other styles don't mess things up!
    var testerStyle = 'width: 0px!important; overflow: hidden!important; color: transparent!important;';

    //Create a 'tester' span and place it BEFORE the content
    var testerStart = document.createElement('SPAN');
    testerStart.innerHTML = '|';
    var testerFloat = ' float: left!important;';
    testerStart.setAttribute('style', testerStyle + testerFloat);

    //Insert testerStart before the first child of our element
    if (el.firstChild) {
        el.insertBefore(testerStart, el.firstChild);
    } else {
        el.appendChild(testerStart);
    }

    //Create a 'tester' span and place it AFTER the content
    var testerEnd = document.createElement('SPAN');
    testerEnd.innerHTML = '|';
    testerFloat = ' float: right!important;';
    testerEnd.setAttribute('style', testerStyle + testerFloat);
    el.appendChild(testerEnd);

    //Measure the testers
    var limits = {
        top: testerStart.offsetTop,
        bottom: testerEnd.offsetTop + testerEnd.offsetHeight,
        left: testerStart.offsetLeft,
        right: testerEnd.offsetLeft
    }

    //Remove the testers and return
    el.removeChild(testerStart);
    el.removeChild(testerEnd);
    return limits;
};

因此，在您的情况下，代码应该是：

var paragraphBoundingBox = getLimits($('div>p').get(0));

有几件事需要注意：

1） 如果您使用的是RTL语言，则浮点方向将相反

---

2） 输出对象中的所有四个边缘位置都是相对于el的。offsetParent-use函数可以找到它们相对于文档的位置。

我参加聚会有点晚，但我遇到了类似的问题，并提出了一个解决方案，该方案（到目前为止）似乎适用于此问题的所有实例。我喜欢这个解决方案，因为据我所知，它是独立于浮动元素工作的——您所需要的只是想要获得其真实宽度/位置的元素，仅此而已。为了提高速度，我已经用纯Javascript实现了这一点，但是如果您愿意，可以使用jQuery和单独的CSS样式表简化它

//Get the rendered bounding box for the content of any HTMLElement "el"
var getLimits = function(el) {
    //Set a universal style for both tester spans; use "!important" to make sure other styles don't mess things up!
    var testerStyle = 'width: 0px!important; overflow: hidden!important; color: transparent!important;';

    //Create a 'tester' span and place it BEFORE the content
    var testerStart = document.createElement('SPAN');
    testerStart.innerHTML = '|';
    var testerFloat = ' float: left!important;';
    testerStart.setAttribute('style', testerStyle + testerFloat);

    //Insert testerStart before the first child of our element
    if (el.firstChild) {
        el.insertBefore(testerStart, el.firstChild);
    } else {
        el.appendChild(testerStart);
    }

    //Create a 'tester' span and place it AFTER the content
    var testerEnd = document.createElement('SPAN');
    testerEnd.innerHTML = '|';
    testerFloat = ' float: right!important;';
    testerEnd.setAttribute('style', testerStyle + testerFloat);
    el.appendChild(testerEnd);

    //Measure the testers
    var limits = {
        top: testerStart.offsetTop,
        bottom: testerEnd.offsetTop + testerEnd.offsetHeight,
        left: testerStart.offsetLeft,
        right: testerEnd.offsetLeft
    }

    //Remove the testers and return
    el.removeChild(testerStart);
    el.removeChild(testerEnd);
    return limits;
};

因此，在您的情况下，代码应该是：

var paragraphBoundingBox = getLimits($('div>p').get(0));

有几件事需要注意：

1） 如果您使用的是RTL语言，则浮点方向将相反

---

2） 输出对象中的所有四个边缘位置都是相对于el的。offsetParent-use函数可以找到它们相对于文档的位置。

您实际上不需要像“将标记放置在图像右侧”那样“查找宽度”，这不是您想要的解决方案吗？是的，这可能是一个解决方案，然而，我认为这将涉及改变css的所有元素。我宁愿计算宽度而不必修改html或css。实际上，你不需要“找到宽度”而只需要“将标记放置在图像右侧”，这不是你想要的解决方案吗？是的，这可能是一个解决方案，但我认为这将涉及更改css的所有元素。我宁愿计算宽度而不必修改html或css。我想我可能需要做类似的事情，谢谢Phoenix。最后，我做了一个循环，通过所有元素进行查看，检测它们是否在图像旁边（使用位置和高度），然后使用图像宽度计算我要查找的宽度。它似乎工作可靠，谢谢你。我想我可能不得不这样做，谢谢菲尼克斯。最后，我做了一个循环，通过所有元素进行查看，检测它们是否在图像旁边（使用位置和高度），然后使用图像宽度计算我要查找的宽度。它似乎工作可靠，谢谢你。