Question

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

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

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

所以，我知道图像的大小是50px，但我不知道文本会有多长。
我的另一个提示是元素<span>将始终存在，并且内容不应该被包装。

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

感谢任何帮助。

Answer 1

我找到了实现我想要的方法。我会在这里发布，也许这可以帮助某人。

// 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();";

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

干杯。

Answer 2

宽度是在页面加载时还是在运行中计算的？

如果是页面加载，则 #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。

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

div根据其内容计算div的像素大小？

2 个答案: