Div内部内容宽度

Div Inner Content width

本文关键字：内部 Div      更新时间：2023-09-26

我有一个div结构，如下所示：

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

有没有什么方法可以像（Alarmasdffasdff）一样获得内容的宽度。这个内容是最大的。

我可以得到内容的长度，但不能得到宽度。请提出建议。

假设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();

无论内容如何，所有'div的宽度都是100%。这就是块级元素的行为方式。。。

使用：contains（）

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

正如其他人所说，无论内容的宽度如何，块级元素的宽度都是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();
Jquery让它变得非常简单。 
$('#showHide').find('div:last').css('width');

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

没有jquery，就不那么"干净"了

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

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

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

<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>

自定义宽度是为了让u能够理解差异，否则每个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/

相关文章：