여기 내가 사용한 트릭이 있습니다. CSS 속성을 추가하여 jQuery가 요소를 볼 수 있다고 생각하도록 만들지 만 실제로는 여전히 숨겨져 있습니다.
var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });
일종의 해킹이지만 저에게는 잘 작동하는 것 같습니다.
최신 정보
이 주제를 다루는 블로그 게시물 을 작성했습니다 . 위에서 사용 된 방법은 CSS 속성을 빈 값으로 재설정하기 때문에 문제가 될 수 있습니다. 이전에 가치가 있었다면 어떨까요? 업데이트 된 솔루션은 jQuery 소스 코드에있는 swap () 메서드를 사용합니다.
참조 된 블로그 게시물의 코드 :
//Optional parameter includeMargin is used when calculating outer dimensions
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
var $item = this,
props = { position: 'absolute', visibility: 'hidden', display: 'block' },
dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
$hiddenParents = $item.parents().andSelf().not(':visible'),
includeMargin = (includeMargin == null) ? false : includeMargin;
var oldProps = [];
$hiddenParents.each(function () {
var old = {};
for (var name in props) {
old[name] = this.style[name];
this.style[name] = props[name];
}
oldProps.push(old);
});
dim.width = $item.width();
dim.outerWidth = $item.outerWidth(includeMargin);
dim.innerWidth = $item.innerWidth();
dim.height = $item.height();
dim.innerHeight = $item.innerHeight();
dim.outerHeight = $item.outerHeight(includeMargin);
$hiddenParents.each(function (i) {
var old = oldProps[i];
for (var name in props) {
this.style[name] = old[name];
}
});
return dim;
}
}(jQuery));
