jQuery or Javascript method to get width/height of text

Question

I have this code that generates a table row:

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);
        }

And this function that gets the largest width

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

Currently the id that I send is 'PO' and iterate over each th in there.

.r90 is a class that rotates the text 90 degrees so that it is shown vertical.

I used to have this function working when the table was statically made in an html file but now that I am generating the table dynamically, I cannot get it to work.

What I need in the end is to know how many px the biggest span takes up so that I can set the height of that row appropriately.

You may include padding & borders consider using `$(this).outerWidth()` and/or `$(this).outerHeight()` instead — Stphane, Apr 11 '14 at 14:51
Is there a way to get the width in pixels of the text right after i generate the span (var sp)? — michaela_elise, Apr 11 '14 at 15:01
May be if you add `th span{display:inline-block}` css, spans inside th will react as inline boxes and their width might be "gettable". I guess you'll be able to get this width once your table will be added to the DOM — Stphane, Apr 11 '14 at 15:08
check out http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript — JF it, Apr 11 '14 at 15:12
Here is the .r90 declaration .r90 { vertical-align: bottom; } .r90 span { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-family: verdana; display: inline-block; white-space: nowrap; width: 20px; padding-left: 0.3em; } — michaela_elise, Apr 11 '14 at 15:12

score 0 · Answer 1 · answered Apr 11 '14 at 15:44

Thank you guys. Based on the link from 'Jf it' i ended up with this...

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);
    }

It works exactly as I need. :)

jQuery or Javascript method to get width/height of text

1 Answers1