Question

I have the following element.

var e=$('<span/>', {"class":'someClass',text:'Hello'});

I wish to get its outer width. It appears that I cannot just use e.outerWidth() as it needs to be written to the screen first. Correct?

So, now the real question. Instead of using text “Hello”, I wish to know the outer width if the text had been “Goodby” How would this be accomplished?

Thank you

Answer 1

You could append the element to the document but outside the viewport, eg left: -10000px. Then outerWidth() would work.

Try this:

var e = $('<span/>', {"class":'someClass',text:'Hello'}).css({
    'position': 'absolute',
    'left': '-10000px'
}).appendTo('body');
var outerWidth = e.outerWidth();
e.remove(); // remove the element from the DOM once we've got it's width

Example fiddle