LoginSignup
28
26

More than 5 years have passed since last update.

@r_abe01in株式会社アールビーズ エンジニアチーム

opacity: 0; と visibility: hidden;のJavaScriptにおける微妙な違い

Last updated at Posted at 2016-02-04

opacity: 0;とvisibility: hidden;ですが双方共に下記の動作をします。
・見た目上は見えない
・display: none;とは異なり、幅/高さは保持しており要素自体が存在している。

ただし、JavaScriptのイベントが発火するかしないかという違いがあります。

opacity: 0;

イベントが発火します。

visibility: hidden;

イベントが発火しません。

サンプル

まとめ

稀にこの2つの特性を活かした実装が必要になるケースがあるので上手く使い分けると良いかもしれません。

28
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
28
26