Get real width of elements with jQuery

Question

I am writing a validator for \"visual correctness\" of html files. The goal is to detect too wide elements.

Here is a demo of my problem.

The do

Answer 1

As others have pointed out, changing the position of the element to absolute also works. Doing this will result in an inline-style which can mess with your css afterwards if you don't watch out. Here is a solution to get rid of the inline style again.

//Change position to absolute
$('#two').css("position", "absolute");
var textWidth = $('#two').width();

//Get rid of the inline style again
$('#two').removeStyle("position");



//Plugin format
(function ($) {
    $.fn.removeStyle = function (style) {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function () {
            $(this).attr('style', function (i, style) {
                return style.replace(search, '');
            });
        });
    };
}(jQuery));