【CSS】display属性について

display属性の継承について

仕事で詰まったので調査をします。

displayプロパティ(しらぎくさいと)を見ると、display属性は下位の要素には継承されないらしい
以下、引用。

displayプロパティは、上位要素から継承されません。

ここで疑問。

1. 最初にページが描画されたときは継承しないのか
2. JavaScriptで動的にdisplay属性を操作したとき、その子要素はどうなるのか

この辺りを調査します。

長文なので結論から書きます

結論。

1. 最初にページが描画されたときは継承しない
2. 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に変更しても、結果は同じでした。

結論

1. 最初にページが描画されたときは継承しない
2. 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タグの画像が表示されて欲しいのに、表示されない。

またもっと見て行きます。