スタイルの可視性プロパティ
例
<p>要素のコンテンツを非表示にします。
document.getElementById("myP").style.visibility = "hidden";
定義と使用法
可視性プロパティは、要素を表示するかどうかを設定または返します。
可視性プロパティを使用すると、作成者は要素を表示または非表示にできます。これは、 displayプロパティに似ています。ただし、を設定するdisplay:none
と、要素全体が非表示になり、要素visibility:hidden
の内容は非表示になりますが、要素は元の位置とサイズのままになります。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
構文
可視性プロパティを返します。
object.style.visibility
可視性プロパティを設定します。
object.style.visibility = "visible|hidden|collapse|initial|inherit"
プロパティ値
Value | Description |
---|---|
visible | The element is visible. This is default |
hidden | The element is not visible, but still affects layout |
collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | 見える |
---|---|
戻り値: | 要素のコンテンツが表示されるかどうかを表す文字列 |
CSSバージョン | CSS2 |
その他の例
例
displayプロパティとvisibilityプロパティの違い:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
例
要素の非表示と表示を切り替えます。
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
例
<img>要素を非表示にして表示します。
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
例
<p>要素の可視性タイプを返します。
alert(document.getElementById("myP").style.visibility);
関連ページ
CSSチュートリアル:CSSの表示と可視性
CSSリファレンス:可視性プロパティ
❮スタイルオブジェクト