はにまるですです

hanimarudesuのブログです。特にジャンルとか決めていません。

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

フロントエンドのお仕事をしていて、JavaScript で特定要素の横幅や高さを取得するということがよくあります。

jQuery なら innerWidh() や innerHeight() などを使って簡単に取得できるのですが、実はこれらのメソッドは実行時に対象そのもの、または親要素が display: none; になっていなければ正常に取得することができません。

cly7796.net

JavaScript を一から自分で記述する場合はその点ある程度気を付けることができるのですが、jQueryプラグインなどで特定要素の幅や高さを取得するものがある場合、その処理を実行するときに対象要素の display プロパティには要注意です。

回避方法はいくつか有って上記 URL のブログでも紹介されています。個人的には visibility: hidden; と position: absolute; を設定する方法がいちばんスマートではないかなと思います。

display: none; はとても便利なのでよく使いがちですが、意外な落とし穴がありますね。