获取文本宽度/高度的 jQuery 或 Javascript 方法答案

【问题标题】：jQuery or Javascript method to get width/height of text获取文本宽度/高度的 jQuery 或 Javascript 方法
【发布时间】：2014-05-25 19:18:03
【问题描述】：

我有生成表格行的代码：

var tr = $('<tr></tr>').attr('id', 'PO');   
    tbody.append(tr);
    for( var i=0; i < $numCols; ++i)
        {
        var th = $('<th></th>').addClass('r90').attr('id', 'th1' + i);
        var sp = $('<span></span>').text($headers1[i]); 

        if(i == 6)
            {
            th.addClass('biggerText borderCell2 selectable');
            }
        if(i > 6 && i < 13 )
            {
            th.addClass('borderCell2 smallerText selectable isHeader');
            }
        if(i > 12)
            {
            th.addClass('borderCell1 smallerText selectable');
            }
        th.append(sp);
        tr.append(th);
        }

这个函数得到最大宽度

function getLargest(id)
    {
    $largestWidth = 0;
    $('#' + id + ' th').each( function() {
        if( $(this).width() > $largestWidth)
            {
             $largestWidth = $(this).width();
            }
    }); 
    alert($largestWidth);
    //$('#' + id).css('height', $largestWidth);
    }

目前我发送的 id 是 'PO' 并在其中迭代每个 th。

.r90 是一个将文本旋转 90 度以使其垂直显示的类。

当表格在 html 文件中静态创建时，我曾经让这个函数工作，但现在我动态生成表格，我无法让它工作。

我最终需要的是知道最大跨度占用多少px，以便我可以适当地设置该行的高度。

【问题讨论】：

您可能包含填充和边框，请考虑使用$(this).outerWidth() 和/或$(this).outerHeight() 代替
有没有办法在我生成 span (var sp) 后立即获取文本的宽度（以像素为单位）？
可能如果你添加th span{display:inline-block} css，th 内的跨度将作为内联框反应，并且它们的宽度可能是“可获取的”。我想一旦你的表格被添加到 DOM 中，你就可以得到这个宽度
签出stackoverflow.com/questions/118241/…
这里是 .r90 声明 .r90 { vertical-align: bottom; } .r90 span { -webkit-transform: rotate(-90deg); -moz 变换：旋转（-90 度）； -o-变换：旋转（-90度）； -ms 变换：旋转（-90 度）；变换：旋转（-90度）；字体系列：verdana；显示：内联块；空白：nowrap；宽度：20px；左填充：0.3em； }

标签： jquery html-table width

【解决方案1】：

谢谢你们。基于来自“Jf it”的链接，我最终得到了这个......

function getWidth(id) 
    {
    $largestWidth = 0;
    $('#' + id + ' th span').each( function() {
        var text = $(this).text();
        var o = $('<div>' + text + '</div>').css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': '16px verdana'}).appendTo($('body')),
        w = o.width();
        if(w > $largestWidth)
            {
            $largestWidth = w;
            }
        o.remove();
    });

    $('#' + id).css('height', $largestWidth);
    }

它完全按照我的需要工作。 :)

【讨论】：