CSS の可視性属性は、要素を表示するかどうかを設定するために使用されます。この属性を JavaScript で使用すると、たとえば、Web ページ上でいくつかのテスト質問を行うときに、可視性を使用できます。属性を使用して質問に対する回答を変更したり、解析を非表示にして必要に応じて表示したりします。
可視性属性の可能な値は次のとおりです。
例：
1.目に見える
表示される (デフォルト) 使用法
デフォルトのプロパティ値が表示されるので。したがって、3 つの小さなボックスがすべて表示されます。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>ドキュメント</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}</style></head><body><div> </div><div></div><div></div></body></html>実行結果:
2.隠された
最初の小さなボックスを表示しないように設定すると (可視性: 非表示;)、2 番目の小さなボックスは元の位置を占めます。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>ドキュメント</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}</style></head><body ><div></div><div></div><div></div></body></html>実行結果:
注: 表示設定によって要素が非表示になった後も、要素は元の位置を占め続けます。
非表示要素が元の位置にある場合は、visibility:hidden を使用します。
非表示要素が元の位置を望まない場合は、display:none を使用します。
3.継承する
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>ドキュメント</title><style>.one,.two ,.three{幅:100px;高さ:100px;}.one{背景色:ペールグリーン;}.two{背景色:ペールグリーン;}.three{背景色:パパイヤホイップ;}.four,.five{幅:50px;height:50px;background-color:powderblue;}</style></head><body><div><div></div></div><div><div></div>< /div><div></div></body></html>実行結果:
継承属性値を使用する場合。
(1) 最初の大きな緑色のボックスは非表示に設定されているため、最初のボックス内の小さな青いボックスは、大きなボックスの非表示属性を継承して表示されません。
(2) 2 番目の小さな青いボックスは、大きなピンクのボックスのデフォルトの表示属性を継承しているため、表示されます。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>ドキュメント</title><style>.one,.two ,.three{幅:100px;高さ:100px;}.one{背景色:ペールグリーン;可視性:非表示;}.two{背景色:パレバイオレット;}.three{背景色:パパイヤホイップ;}.four, .five{幅:50px;高さ:50px;背景色:パウダーブルー;}</style></head><body><div><div></div></div><div><div>< /div></div><div></div></body></html>実行結果:
