jquery - 使用jQuery计算块级元素中文本节点的宽度

Question

说我有：

<div>Some variable amount of text.</div>

如何获取 div 中文本的宽度（以像素为单位）？

请记住，文本的数量会因 div 而异。

谢谢！

Answer 1

听起来您想要内容的宽度，而不是其他人提供的 div 本身的宽度。我认为您需要将内容包装在一个跨度中，以便您可以测量跨度的宽度。div 将始终尽可能宽。您需要一些可以折叠到您可以测量的内容大小的东西。

Answer 2

我发现最好的方法是使用 CSS 规则"display:inline;"只绑定textNode给定的 HTML 元素，然后使用offsetWidthJS 方法。

<div style="display:inline;" id="gotWidthInPixels" >Some variable amount of text.</div>
<script>
  //either:
  var widthInPixels= $('#gotWidthInPixels')[0].offsetWidth; 
  //or
  var widthInPixels= document.getElementById("gotWidthInPixels").offsetWidth;
</script>

这将为您提供任何 HTML 元素的精确宽度（以像素为单位）。

Answer 3

我有一些奇怪的问题，其中空格打破了 jquery 中的宽度计算。不知道到底为什么，如果是因为字符串变量和连接，或者 JMVC 框架，或者只是 jQuery。

但是，使空间成为非破坏空间

 

似乎解决了它。只是把它扔在那里以防万一。

Answer 4

var w = $('div').width()

或为 div 使用任何其他选择器

Answer 5

只需像这样使用 width() ：

<div id="mydiv">text text text</div>
<script>
alert( $('#mydiv').width() );
</script>

Answer 6

关于@mrtsherman，如果您只想要可以使用的文本的宽度

var myDiv = $('#myDiv'); 

//div width
var textWidth = sb.width();

//remove padding and margin from left and right
textWidth -= parseInt(sb.css('padding-left') ) + parseInt(sb.css('margin-left') );
textWidth -= parseInt(sb.css('padding-right') ) + parseInt(sb.css('margin-right') );