web-dev-qa-db-ja.com

style.display = ''は実際に何をしますか？

この問題を数時間調査した後、ページ要素の表示を（HTMLで）切り替える最も効率的な方法の1つは、次のようなことです。

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

簡単な質問：style.display = ''実際にそうですか？

元の表示プロパティを「リセット」しますか？

または、表示プロパティを削除して、デフォルトのスタイルを表示に使用しますか？

..........................................

知っておくといいだろう：誰かがこれに関するドキュメントへのリンクを知っていますか？

（はい、私はこの問題をGoogle-dで調べましたが、おそらく正しい検索語を入力していないので、完全に無関係な検索結果を出し続けています。）

提案やリンクをお寄せいただきありがとうございます。

javascriptcsssyntax
47
Shawn Spencer

はい、インラインの「display：none」を空白にすることで要素の表示プロパティをデフォルトにリセットし、ページのCSSランキングルールで定義されているように要素をその表示プロパティにフォールバックさせます。

たとえば、IDが「myElement」の<div>は次のとおりです。

<div id="myElement"></div>

<div>には、デフォルトでdisplay:blockの設定があります。スタイルシートで、<div>をtableとして表示するように指定するとします。

div#myElement
{
    display:table;
}

ページをロードすると、<div>はtableとして表示されます。スクリプトでこの<div>を非表示にする場合は、次のいずれかを実行できます。

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

これらはすべて同じ効果があります。インラインstyleプロパティを<div>に追加します。

<div id="myElement" style="display:none"></div>

要素を再度表示したい場合は、次のいずれかが機能します。

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

これらは、インラインdisplayプロパティからstyle CSSプロパティを削除します。

<div style=""></div>

インラインスタイルではdisplayが指定されなくなったため、<div>はtableとして表示されるようになります。これがスタイルシートに含まれているためです。 <div>はnotがblockとして表示されるように戻ります。これは、CSSがデフォルト設定を上書きしたためです。インラインdisplayプロパティを空白にしても、スタイルシートの規則は無効になりません。

笑いの場合、回答の検証に使用したGoogleクエリは次のとおりです：javascript style display empty string default

...およびこれが言及されているいくつかのリンク：

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ （記事ではなく、コメントセクションで）

42
Jake

displayスタイルをその要素のデフォルト値に設定します。すべてではないにしてもほとんどの要素では、デフォルト値はnone以外です。

10
BoltClock

デフォルト値が使用されるように、表示プロパティの値を削除します。

それしません元の表示プロパティをリセットします。

たとえば、これがある場合：

<span id="test" style="display:block;">b</span>

そしてこれを行います：

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

要素に使用されるdisplayスタイルはinlineになります。これは要素のデフォルトであるため、HTMLコードで指定されたスタイルにリセットされないためです。

6
Guffa

その要素のディスプレイのcssをnullに設定します。これにより、設定された内容が実質的に消去され、デフォルト値に戻ります。

1
Neal