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

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

悩む人

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

今回ハマったこと

  • 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='http://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 にして、画面外にすっとばしちゃえばOK。
サンプルページ

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください