javascript - 如何确保在获取元素的边框宽度之前添加了一个类？

Question

似乎当我使用 jQuery 的 addClass 函数添加一个带有 2px 边框的类时，它有时返回旧值而不是在 iframe 中输出 css 时返回新值。我认为这种情况只是有时会发生，因为类的添加速度有多快。例如:

样式表:

.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'));

输出的边框值通常为 0 而不是 2px。我可以做类似的事情:

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

但是希望在添加类后立即应用它，因为我使用这些值来正确定位，看起来不像它在跳跃。

CSS 正在被应用和反射(reflect)，所以我知道它正在更新而不是被另一种样式覆盖。

我使用的 jQuery 版本是 1.10.2，带有 jQ​​uery Migrate v1.2.1，我使用的是 jQuery UI。

Answer 1

试试这个:

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 */