display: none;のとき要素のサイズが取得できない

display: none;で要素を非表示にした状態のとき、その要素のサイズが取得できない場合があります。
タブやプルダウンなど、display: none;で非表示にすることは多いので、うまくサイズを取得する方法がないか試してみました。

対応しない場合

まずは特に対応していない場合に取得できるかを試してみます。

HTML

<div id="sample">
	<img src="http://placehold.it/300x100" width="300" height="100" id="sampleImg">
</div>

CSS

#sample {
	display: none;
	width: 300px;
	height: 200px;
}

JavaScript

var sample = document.getElementById('sample');
console.log('sample.offsetHeight:' + sample.offsetHeight); // 0
console.log('sample.clientHeight:' + sample.clientHeight); // 0

var sampleImg = document.getElementById('sampleImg');
console.log('sampleImg.offsetHeight:' + sampleImg.offsetHeight); // 0
console.log('sampleImg.clientHeight:' + sampleImg.clientHeight); // 0

$(function() {
	var $sample = $('#sample');
	console.log('$sample.height():' + $sample.height()); // 200
	console.log('$sample.innerHeight():' + $sample.innerHeight()); // 200
	console.log('$sample.outerHeight():' + $sample.outerHeight()); // 200
	console.log('$sample.css("height"):' + $sample.css('height')); // 200px

	var $sampleImg = $('#sampleImg');
	console.log('$sampleImg.height():' + $sampleImg.height()); // 100
	console.log('$sampleImg.innerHeight():' + $sampleImg.innerHeight()); // 100
	console.log('$sampleImg.outerHeight():' + $sampleImg.outerHeight()); // 100
	console.log('$sampleImg.css("height"):' + $sampleImg.css('height')); // 100px
});

JavaScriptのoffsetHeightとclientHeightではサイズを取得できませんでしたが、jQueryで試したheight、innerHeight、outerHeight、css(‘height’)は取得できました。
対応しない場合のデモページ
　

visibility: hidden;とposition: absolute;を使った場合

display: none;の代わりにvisibility: hidden;で非表示にして、他要素の配置に影響が出ないようにposition: absolute;を指定してみます。

HTML

<div id="sample2">
	<img src="http://placehold.it/300x100" width="300" height="100" id="sampleImg">
</div>

CSS

#sample2 {
	position: absolute;
	width: 300px;
	height: 200px;
	visibility: hidden;
}

JavaScript

var sample = document.getElementById('sample2');
console.log('sample.offsetHeight:' + sample.offsetHeight); // 200
console.log('sample.clientHeight:' + sample.clientHeight); // 200

var sampleImg = document.getElementById('sampleImg');
console.log('sampleImg.offsetHeight:' + sampleImg.offsetHeight); // 100
console.log('sampleImg.clientHeight:' + sampleImg.clientHeight); // 100

$(function() {
	var $sample = $('#sample2');
	console.log('$sample.height():' + $sample.height()); // 200
	console.log('$sample.innerHeight():' + $sample.innerHeight()); // 200
	console.log('$sample.outerHeight():' + $sample.outerHeight()); // 200
	console.log('$sample.css("height"):' + $sample.css('height')); // 200px

	var $sampleImg = $('#sampleImg');
	console.log('$sampleImg.height():' + $sampleImg.height()); // 100
	console.log('$sampleImg.innerHeight():' + $sampleImg.innerHeight()); // 100
	console.log('$sampleImg.outerHeight():' + $sampleImg.outerHeight()); // 100
	console.log('$sampleImg.css("height"):' + $sampleImg.css('height')); // 100px
});

一通り値が取得できました。
もともと、position: absolute;を指定する場面では問題ないと思いますが、そうでない場合は表示するときにposition: absolute;を解除する必要があります。
visibility: hidden;とposition: absolute;を使った場合のデモページ
　

取得する直前にdisplay: block;で表示する場合

取得する直前にdisplay: block;で表示して、サイズの取得が完了したら再度display: none;を指定して非表示にします。

HTML

<div id="sample">
	<img src="http://placehold.it/300x100" width="300" height="100" id="sampleImg">
</div>

CSS

#sample {
	display: none;
	width: 300px;
	height: 200px;
}

JavaScript

var sample = document.getElementById('sample');
sample.style.display='block';
console.log('sample.offsetHeight:' + sample.offsetHeight); // 200
console.log('sample.clientHeight:' + sample.clientHeight); // 200

var sampleImg = document.getElementById('sampleImg');
console.log('sampleImg.offsetHeight:' + sampleImg.offsetHeight); // 100
console.log('sampleImg.clientHeight:' + sampleImg.clientHeight); // 100
sample.style.display='none';
$(function() {
	var $sample = $('#sample');
	$sample.show();
	console.log('$sample.height():' + $sample.height()); // 200
	console.log('$sample.innerHeight():' + $sample.innerHeight()); // 200
	console.log('$sample.outerHeight():' + $sample.outerHeight()); // 200
	console.log('$sample.css("height"):' + $sample.css('height')); // 200px

	var $sampleImg = $('#sampleImg');
	console.log('$sampleImg.height():' + $sampleImg.height()); // 100
	console.log('$sampleImg.innerHeight():' + $sampleImg.innerHeight()); // 100
	console.log('$sampleImg.outerHeight():' + $sampleImg.outerHeight()); // 100
	console.log('$sampleImg.css("height"):' + $sampleImg.css('height')); // 100px
	$sample.hide();
});

こちらの方法でも一通り値が取得できました。
取得する直前にdisplay: block;で表示する場合のデモページ
visibility: hidden;を使った対応の方がよい場合もありますが、基本的にはこちらの方法の方がスマートな気がします。