1

そうです、私はCSS初心者です。divを非表示にするさまざまな方法を照合しようとしています。

例えば：

display:none;
visibility:hidden;

もっと難解なものはありますか？

JQuery、JavaScript、イベントのことは忘れてください...多くのコンテンツを含む div とサブ div が非表示になるさまざまな CSS の方法を知りたいだけですか?

これが必要な理由は、ここでいくつかのコードを見ていて、div が見えないためです。なぜわからないのですか？親divの何かかもしれません。

divにはさまざまなクラスがあり、これは犯罪者のように見えます-

.div-content {

    position: absolute;
    left: 70px;
    right: 0;
    top: 55px;
    bottom: 0;

    display: block;

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin: 0;

    /*width: 90%;*/

    background-image: none !important;
    background-color: #F8F7F7;

}

他のさまざまなクラスをコメントインおよびコメントアウトするだけで、このクラスに絞り込みました。このクラスがコメント アウトされると、div が表示されます。

4

4 に答える 4

11

いくつかの可能性:

  • display: none- これにより、ブラウザがレンダリングしなくなります。また、スクリーン リーダーからも完全に消えてしまうので、注意してください。
  • visibility: hidden- これにより、ブラウザはそれをレンダリングしますが、表示されませんが、要素のサイズに対応するスペースが残ります。
  • position: absoluteそしてそれをばかげた場所に送信します（たとえば、left: -99999px;親のがまたはoverflowに設定されていないと仮定します）。autoscroll- これは、要素を実際には表示せずにソースまたは DOM に存在させたい場合に有効です。
  • widthとを 0 に設定しheight、確実にoverflow: hidden- 上記と同じように、要素は完全に非表示になりますが、DOM またはソースにはまだ存在します。
  • opacity: 0visibility: hidden-異なる手段 (つまり、要素の実際の不透明度の変更) によってのみ同じ効果が得られます。

これはすべて、なぜそれが必要なのかによって異なります。

  • 要素を完全に非表示にしますか? display: none（そしてそれを で再表示させるdisplay: block）はあなたの選択です。
  • アニメ化しますか？opacity: 0またはwidth&をheight使用する方がおそらくより良い選択です。
  • スクリーン リーダーからアクセスできるようにしたいが、実際には表示されないようにしたい場合 (たとえば、画像のキャプションが隠れている場合など) はposition: absolute; left: -99999pxうまく機能します。
于 2013-08-16T12:23:09.370 に答える
2

ただし、良い習慣ではありませんが、使用できます

opacity:0
于 2013-08-16T12:22:44.493 に答える
1

なぜそのような質問をするのかわかりませんが、要素を非表示にする別の方法を次に示します。

element.style {
    width: 0px;
    height: 0px;
    overflow: hidden;
}
于 2013-08-16T12:20:31.873 に答える
1

別のもの：

element.style {
    position: absolute;
    left: -10000000px;
}
于 2013-08-16T12:20:49.650 に答える