Đây là một thủ thuật tôi đã sử dụng. Nó liên quan đến việc thêm một số thuộc tính CSS để làm cho jQuery nghĩ rằng phần tử này có thể nhìn thấy, nhưng thực tế nó vẫn bị ẩn.
var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });
Nó là một loại hack, nhưng nó có vẻ hoạt động tốt đối với tôi.
CẬP NHẬT
Tôi đã viết một bài đăng trên blog về chủ đề này. Phương pháp được sử dụng ở trên có khả năng có vấn đề vì bạn đang đặt lại các thuộc tính CSS thành các giá trị trống. Điều gì sẽ xảy ra nếu chúng có các giá trị trước đó? Giải pháp đã cập nhật sử dụng phương thức swap () được tìm thấy trong mã nguồn jQuery.
Mã từ bài đăng blog được tham chiếu:
//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));
