看到实际上我只能看到两个选项:
- 克隆项目,将其定位,使其对用户不可见,然后获取它的尺寸。
- 在视觉上隐藏它,但保持它在 DOM 中的存在并从那里获取它的尺寸。
两者都不是很好的解决方案,但对于任何想使用它的人来说:
HTML:
<img id="hidden" src="http://www.shannonhochkins.com/_images/513330a8965f59b83a00034d" />
CSS:
#hidden {display:none; margin:10px;}
JAVASCRIPT:
$.fn.actual = function(type, includeMargin){
var elem = $(this),
unit = 0;
includeMargin = (includeMargin ? true : false);
elem.css({position: 'absolute', visibility: 'visible', display: 'block'});
switch(type) {
case 'height':
unit = elem.height();
break;
case 'width':
unit = elem.width();
break;
case 'outerHeight':
unit = elem.outerHeight(includeMargin);
break;
case 'outerWidth':
unit = elem.outerWidth(includeMargin);
break;
case 'innerWidth':
unit = elem.innerWidth(includeMargin);
break;
case 'innerHeight':
unit = elem.innerHeight(includeMargin);
break;
}
elem.css({position: 'static', visibility: 'visible', display: 'none' });
return unit;
};
var height = $('#hidden').actual('height');
var width = $('#hidden').actual('outerWidth', true);
alert('Width: ' + width + ' height: ' + height);
演示:
http://jsfiddle.net/bXG5n/
香农