Question

我有一个div结构如下：

<div id="showHide">
    <div>Alarm</div>
    <div>Alarmasdf</div>
    <div>Alarmasdffasdff</div>

有没有办法可以获得内容的宽度，如（Alarmasdffasdff）。这个内容是最大的。

我能够获得内容的长度，但不能获得宽度。请建议。

Answer 1

假设div元素已更改为display: inline，则元素的宽度将与内容匹配。

如果不是这种情况，我建议将内容包装在span或任何其他合适的内联元素中，并获取其宽度。例如：

<div id="showHide">
    <div>
        <span>Alarm</span>
    </div>
    <div>
        <span>Alarmasdf</span>
    </div>
    <div>
        <span>Alarmasdffasdff</span>
    </div>
</div>

$('#showhide').find('div:last span').width();

Answer 2

无论内容如何，您所有＆＃39; div的宽度均为100％。这就是块级元素的行为......

Answer 3

使用 :contains()

$( "#showhide div:contains('Alarmasdffasdff')").width(）;

Answer 4

正如其他人所说，无论内容的宽度如何，块级元素的宽度都是100％。首先，您需要将div的显示更改为inline-block

<style>
#showHide div
{
 display:inline-block;
}
</style>
<div id="showHide">
    <div>Alarm
    </div>
    <div>Alarmasdf
    </div>
    <div>Alarmasdffasdff
    </div>
</div>

$('#showhide>div:contains("Alarmasdffasdff")').innerWidth();

Answer 5

html：

<div id="showHide">
    <div>Alarm</div>
    <div>Alarmasdf</div>
    <div>Alarmasdffasdff</div>
</div>

脚本：

var lastDiv = $('#showHide').find('div').last();
var lastDivWidth = lastDiv.width();

alert(lastDivWidth);

jsFiddle

Answer 6

Jquery非常容易。

$('#showHide').find('div:last').css('width');

css()返回元素的计算样式，即内联样式以及默认样式和任何其他css选择器。

如果没有jquery，它就会少一点＆＃34;干净＆＃34;

var mystyle = window.getComputedStyle ? window.getComputedStyle(myobject, null) : myobject.currentStyle;

mystyle.width显示计算的宽度，其中myobject是您要检查的元素。

Answer 7

<div id="showHide">
    <div class="content" style="width:50px" >Alarm</div>
    <div  class="content" style="width:60px">Alarmasdf</div>
    <div  class="content" style="width:120px">Alarmasdffasdff</div>
</div>

给出自定义宽度以便您可以理解差异，否则每个div将具有相同的宽度，并且为了便于处理而添加类内容

findWidth("Alarmasdf"); // Calls the function below


function findWidth(value)
{
var width=0;
$(".content").each(function(e){
if($(this).text()==value)
{
  width = $(this).width();
}
});
alert(width);
}

在这里查看小提琴 http://jsfiddle.net/46LH9/

Div内容宽度

7 个答案: