How do I make sure a class is added before getting the border width of the element?

Question

It seems that when I use jQuery's addClass function adding a class with a 2px border, that it returns the old value at times and not the new when outputting the css in an iframe. I assume that this happens only sometimes due to how fast the class gets added. For example:

Stylesheet:

.testBorder {
   border: 2px solid #000;
}

JavaScript:

var iframe = $('#contentFrame').contents();
var obj = $('#someObj',iframe);
obj.addClass('testBorder');
console.log(obj.css('border-top-width')); 
console.log(obj.css('border-left-width'));

The border values outputted are often 0 instead of 2px. I can do something like:

obj.delay(500).queue(function(){
   console.log($(this).css('border-top-width')); 
   console.log($(this).css('border-left-width'));
   $(this).dequeue();
});

But looking to apply it immediately after the class is added as I use the values to positon correctly to not look like its jumping.

The CSS is being applied and is reflected, so I know it is updating and not being overridden by another style.

The jQuery version I am using is 1.10.2 with the jQuery Migrate v1.2.1 and I am using the jQuery UI.

Answer 1

Try this:

var iframe_content = ($.browser.msie ? $('#contentFrame').get(0).contentWindow.document) : $('#contentFrame').get(0).contentDocument));
var obj = iframe_content.find('#someObj');
obj.queue(function() { /** check for border width here **/ });
obj.addClass('testBorder').dequeue(); /* this last .dequeue() may not be necessary */