javascript - CSS で要素を非表示にする方法は何ですか?

Question

CSS で HTML 要素を非表示にしようとしています。

<select id="tinynav1" class="tinynav tinynav1">

しかし、非常に回復力があり、Google Inspect 要素を使用してもスタイルを変更できません。

Answer 1

CSSでdisplayプロパティを次のように設定するだけです。none

#tinynav1
{
  display:none
}

再度表示したい場合は、 を に設定displayしblockます。

visibility: hidden要素を非表示にしますが、レイアウト内のスペースを占有します。

display: noneドキュメントから要素を完全に削除します。そのための HTML はまだソース コードにありますが、スペースを占有しません。

を使用するその他の利点display:

display:none問題の要素がページにまったく表示されないことを意味します (ただし、DOM を介して操作することはできます)。他の要素の間に割り当てられるスペースはありません。
visibility:hiddenは、 とは異なりdisplay:none、要素は表示されませんが、ページ上でその要素にスペースが割り当てられることを意味します。

Answer 2

display:none;または_visibility:hidden;

Answer 3

要件に応じてdisplay:noneまたはを使用できます。visibility:hidden

#tinynav{display:none;}

また

 #tinynav{visibility:hidden;}

display:noneとについては、以下の URL を参照してくださいvisibility:hidden。

「display:none」と「visibility:hidden」の違い

Answer 4

CSS:

select#tinynav1  { display: none; }

または、複数の選択を非表示にする必要がある場合は、対応するクラスを使用します。

select.tinynav1  { display: none; }

インラインスタイルとしても実行できます（インスペクターで試すことができます）：

<select id="tinynav1" style="display: none">

Answer 5

非表示にして必要なスペースを縮小したい場合は、 を使用します。display: none;スペースを維持したい場合は、 を使用しますvisibility: hidden。

<select id="tinynav1" class="tinynav tinynav1">

CSS

.tinynav {
    display: none;
}

Answer 6

このCSSを使用

.tinynav {
    display: none;
}

また

.tinynav {
    visibility: hidden;
}

違いは、前者はselectまったくレンダリングされず、後者はselectレンダリングされます (ドキュメントのスペースが必要になります) が、完全に非表示になります。

違いを示すフィドルを次に示します: http://jsfiddle.net/rdGgn/2/
3 行目のテキストの前に空白があることに注意してください。レンダリングされるが表示されないのは選択です。テキストの 2 行目の前にスペースはありませんdisplay:none。

次の 3 番目のオプションもあります。

.tinynav {
    opacity: 0;
}

とほとんど同じように動作しますvisibility: hiddenが、唯一の違いはopacity: 0、選択をクリックできることです。無効にvisibility: hiddenなっています。

Answer 7

style="display:none"で直接使用する<select>か、その設定を持つ css クラスを作成して、クラスを に割り当て<select>ます。