IEだと display:none にした画像の高さと幅が取れない

IEはキライですコンバンハ。

IE + javascript + 画像でえらくハマったので気晴らしに書きますｗ

今回ハマったこと

display:none にしたdivの中に画像をセット
セットした画像の幅、高さを取得する

[html title="サンプルHTML"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja">
<title>値を取れないパターン</title>

<style type='text/css'>
    #image_box{
        display: none;
    }
</style>

<script type='text/javascript'>
    function getSize(){
        var target = document.getElementById('image');
        alert('width:' +target.width +'\n' +'height:' +target.height);
    }
</script>

</head>
<body>
    <h3>値を取れないパターン</h3>

    <button onclick='getSize();'>値を取得！</button>

    <div id='image_box'>
        <img src='https://zafiel.wingall.com/nico/python1/img/1.jpg' id='image'>
    </div>

    <div style='border-top:1px solid #ccc;margin-top:1em;color:#999;padding-top:10px;text-align:center'>footerほげふが</div>
</body>
</html>
[/html]

ボタンを押すと、画像の高さと幅を取得して表示します。

で、ボタン押をしてみると

高さ、幅ともにゼロ。え？？？
サンプルページ (IEで試してみてください)

対処方法

IEは要素を画面に表示してあげないと値を取れないらしい。なんじゃそら。
display:none;をやめて、visibility:hidden にすると
サンプルページ

・・・取れるし。

visibility:hidden だと内包している要素にひっぱられてレイアウトが崩れちゃうので、最終的には position:absolute にして、画面外にすっとばしちゃえばＯＫ。
サンプルページ

たったこれだけだけど、気づくまでえーーらくかかってしまいました。うえええ。

IEキライ！カエレ！！(`Д´*)

今回ハマったこと

で、ボタン押をしてみると

対処方法

こちらの記事もあわせてどうぞ

コメントを残すコメントをキャンセル