Javascript 根据div的内容计算其大小（以像素为单位）？

在Javascript/JQuery中，确定div实际显示所需像素大小的最佳方法是什么

假设我有一个表，其中的列是用标签width=“60px”固定的。在本专栏中，我动态添加了一个具有特定内容的div，主要内容如下：

<div class="auto">
<img width="50px" src="/images/header-5123724.png">
<hr>
<span>Table1</span></div>

表1

因此，我知道图像的大小是50px，但不知道文本的长度。
我得到的另一个提示是元素

将始终存在，并且内容不应该被包装

有没有办法“渲染”跨度并获得像素大小

---

非常感谢您的帮助。

我找到了一种方法来实现我的愿望。我会把它贴在这里，也许这可以帮助别人

// add an extra span
$(this).parent().append('<span id="test" />');

//.. pick up the element to test into obj

// test the size
$('#test').html(obj.text()).css({
  'font-family': obj.css('font-family'),
  'font-size': obj.css('font-size'),
  'font-weight': obj.css('font-weight')
});

//Width and adjustment
Width = $('#test').width() + 24;

//...If we want to check the max width, then we can loop through many columns of the table

//Finally adjust the width

obj.width(Width).css('min-width', Width);

//Cleanup
$('#test').remove();";

//添加一个额外的跨度
$（this.parent（）.append（“”）；
//.. 将要测试的元件拾取到obj中
//测试尺寸
$（'#test'）.html（obj.text（））.css({
“字体系列”：obj.css（“字体系列”），
“字体大小”：obj.css（“字体大小”），
'font-weight'：obj.css（'font-weight'）
});
//宽度和调整
宽度=$（“#测试”）.Width（）+24；
//…如果我们想检查最大宽度，那么我们可以循环表中的许多列
//最后调整宽度
对象宽度（width）.css（'min-width'，width）；
//清理
$（'#test'）。删除（）；";

它不是很干净，但这对我的情况有效。出于某种原因，列的大小没有正确设置，因为在浏览器呈现内容后，某些插件调整了列的大小

---

干杯。

我找到了一个方法来实现我想要的。我会把它贴在这里，也许这可以帮助别人

// add an extra span
$(this).parent().append('<span id="test" />');

//.. pick up the element to test into obj

// test the size
$('#test').html(obj.text()).css({
  'font-family': obj.css('font-family'),
  'font-size': obj.css('font-size'),
  'font-weight': obj.css('font-weight')
});

//Width and adjustment
Width = $('#test').width() + 24;

//...If we want to check the max width, then we can loop through many columns of the table

//Finally adjust the width

obj.width(Width).css('min-width', Width);

//Cleanup
$('#test').remove();";

//添加一个额外的跨度
$（this.parent（）.append（“”）；
//..将要测试的元件拾取到obj中
//测试尺寸
$（'#test'）.html（obj.text（））.css({
“字体系列”：obj.css（“字体系列”），
“字体大小”：obj.css（“字体大小”），
'font-weight'：obj.css（'font-weight'）
});
//宽度和调整
宽度=$（“#测试”）.Width（）+24；
//…如果我们想检查最大宽度，那么我们可以循环表中的许多列
//最后调整宽度
对象宽度（width）.css（'min-width'，width）；
//清理
$（“#测试”）.remove（）；”；

它不是很干净，但这对我的案子有效。由于某些原因，列的大小没有正确设置，因为在浏览器呈现内容后，某些插件调整了列的大小

---

干杯。

宽度是根据页面加载还是动态计算

如果它在页面加载中，那么，#cont是内容框的id

$(document).ready(function() {
    var dynWidth = $('#cont').width();
    console.log('dynWidth: ' + dynWidth);
});

如果它在飞行中

$(document).ready(function() {
    $('#cont').bind('DOMSubtreeModified', function(){
        var dynWidth = $('#cont').width();
        console.log('changed dynWidth: ' + dynWidth);
    });
});

注意：IE8（及以下版本）不支持DOMSubtreeModified

---

有关任何详细信息，请参阅。

宽度是根据页面加载还是动态计算

如果它在页面加载中，那么，#cont是内容框的id

$(document).ready(function() {
    var dynWidth = $('#cont').width();
    console.log('dynWidth: ' + dynWidth);
});

如果它在飞行中

$(document).ready(function() {
    $('#cont').bind('DOMSubtreeModified', function(){
        var dynWidth = $('#cont').width();
        console.log('changed dynWidth: ' + dynWidth);
    });
});

注意：IE8（及以下版本）不支持DOMSubtreeModified

---

有关详细信息，请参阅此。

让浏览器渲染元素，然后获取大小并进行调整您正在查找

innerheight

或

innerwidth

？我知道这一点，但我的专栏仍在剪切我的文本。字体大小可能会在其中发挥一些作用？让浏览器渲染元素，然后获取大小并进行调整您正在查找

innerheight

或

innerwidth

？我知道这一点，但我的专栏仍然在剪切我的文本。字体大小可以在其中起到一定的作用吗？