display属性の継承について
仕事で詰まったので調査をします。displayプロパティ(しらぎくさいと)を見ると、display属性は下位の要素には継承されないらしい
以下、引用。
displayプロパティは、上位要素から継承されません。
ここで疑問。
- 最初にページが描画されたときは継承しないのか
- JavaScriptで動的にdisplay属性を操作したとき、その子要素はどうなるのか
この辺りを調査します。
長文なので結論から書きます
結論。- 最初にページが描画されたときは継承しない
- JavaScriptで動的にdisplay属性を操作したとき、その子要素のdisplay属性には影響はない
サンプルコードはこんな感じのを使用します
HTML(サンプル1とする)<a href="#" id="a"> <img id="img" src="http://example.com/example.jpg"/> </a>
aタグ、imgタグのdisplayをちょこちょこ修正して調査していきます。
描画時点のaタグ、imgタグのdisplay属性の値は、以下のようなJavaScriptで調べます。
alert("aタグのdisplay属性の値:" + $("a").style.display);
alert("imgタグのdisplay属性の値:" + $("img").style.display);
function $(id){
return document.getElementById(id);
}
最初にページが描画されたときは継承しないのか
【まずはサンプル1で検証】予想。
- aタグはインライン要素なので、描画された時点では display:inline; となっているハズ
- imgタグもインライン要素なので、描画された時点では display:inline; となっているハズ
結果。
| aタグのdisplay属性の値 | imgタグのdisplay属性の値 | |
|---|---|---|
| IE7 | 値なし | 値なし |
| Firefox 3.6.8 | 値なし | 値なし |
| Google Chrome 8.0 | 値なし | 値なし |
| Opera 11.00 | 値なし | 値なし |
予想外。
display属性の値は明示的にセットしないと、JavaSriptでは何も取得できないようです。
【aタグをdisplay:block;とするとどうなるのか】
HTML(サンプル2とする)
<a href="#" id="a" style="display:block;"> <img id="img" src="http://example.com/example.jpg"/> </a>
予想。
- aタグは、描画された時点では display:block; となっているハズ
- imgタグは、描画された時点では display:値なし となっているハズ
結果。
予想通り。
aタグをdisplay:none;としても、上記と同様の結果になりました。
JavaScriptでdisplay属性を操作したとき、その子要素はどうなるのか
aタグのdisplay属性をJavaScriptで操作したあと、imgタグのdisplay属性を確認します。【HTMLサンプル1で検証】
以下のJavaScriptを使用します。
//aタグのdisplay属性をblockにしてからimgタグのdisplay属性を確認
$("a").style.display = "block";
alert("imgタグのdisplay属性の値:" + $("img").style.display);
function $(id){
return document.getElementById(id);
}
予想。
- 上位のdisplay属性は継承されないので、imgタグのdisplay属性は 値なし となる
結果。
予想通り。
aタグのdisplay属性をnoneに変更しても、結果は同じでした。
結論
- 最初にページが描画されたときは継承しない
- JavaScriptで動的にdisplay属性を操作したとき、その子要素のdisplay属性には影響はない
ただここでもう一つ疑問が。
HTMLサンプル3
<a href="#" id="a" style="display:none;"> <!-- display:none; --> <img id="img" style="display:block;" src="http://example.com/example.jpg"/> <!-- display:block なのでこれは表示されて欲しい --> </a>
としたときに、imgタグの画像が表示されて欲しいのに、表示されない。
またもっと見て行きます。
