如何獲取浮動元素放置在標誌線中的內聯元素的寬度

我想獲得內聯元素的準確值，即p標籤寬度。按照dom它顯示的是600px，但它不是根據呈現文本的實際寬度。如何獲取浮動元素放置在標誌線中的內聯元素的寬度

如何獲得p標籤的正確寬度，即浮動div使用的跳過寬度。

這是我的HTML結構

<div id="parent"> 
 
\t <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;"> 
 
\t \t Floating div 
 
\t </div> 
 
    <div id="child"> 
 
     <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p> 
 
    </div> 
 
</div>

jsFiddle link

我想只有Java的腳本的幫助，以實現這一目標。

歡迎任何建議，謝謝你的幫助。

來源

2016-08-04 Joyston Colaco

var parentWidth = $("#parent").width(); 
 
    var floatDivWidth = $("#floating").width(); 
 
    var pWidth = parentWidth-floatDivWidth; //width of <p> tag 
 
    
 
    alert(pWidth);

#parent { 
 
    width: 600px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
\t <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;"> 
 
\t \t Floating div 
 
\t </div> 
 
    <div id="child"> 
 
     <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p> 
 
    </div> 
 
</div>

https://jsfiddle.net/q98L4hqu/1/

來源

2016-08-04 13:37:45 Dave

如果我沒有參考浮動DIV。我沒有和div或class div，而不是我如何得到它的寬度？ –

使用

alert(document.getElementById("p1").offsetWidth)

例

<div id="parent"> 
 
\t <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;"> 
 
\t \t Floating div 
 
\t </div> 
 
    <div id="child"> 
 
     <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p> 
 
    </div> 
 
</div> 
 

 
<script> 
 
alert(document.getElementById("p1").offsetWidth) 
 
</script>

參考來自：How do I retrieve an HTML element's actual width and height?

來源

2016-08-04 13:38:20 Mani

如何獲取浮動元素放置在標誌線中的內聯元素的寬度

回答

相關問題