Style visibility 属性

定義と用法

visibility 属性は、要素が見えるべきかどうかを設定または返します。

visibility 属性は、作者が要素を表示または非表示にするのに許可されています。

この属性は以下の属性に似ています。 display 属性が設定された場合、 display:none、要素全体を隠しますが、 visibility:hidden 要素の内容は見えなくなるが、元の位置と大きさは保持されます。

参照してください：

CSS 説明書：CSS Display と visibility

CSS 参考マニュアル：visibility 属性

例

例 1

内容を非表示にする <p> 要素：

document.getElementById("myP").style.visibility = "hidden";

自分で試してみる

ページ下部にさらに多くの例があります。

语法

visibility 属性の返却：

object.style.visibility

visibility 属性の設定：

object.style.visibility = "visible|hidden|collapse|initial|inherit"

属性値

値 説明
visible この要素は可視です。デフォルト。
hidden 要素は不可視ですが、レイアウトに影響を与えます。
collapse テーブル行やセル上で使用時、要素は不可視です（"hidden"と同じ）。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的な詳細

デフォルト値： visible
返却値： 文字列、要素の表示有無を示す。
CSS バージョン： CSS2

ブラウザサポート

クローム エッジ ファイアフォックス サファリ オペラ
クローム エッジ ファイアフォックス サファリ オペラ
サポート サポート サポート サポート サポート

さらに多くの例

例 2

display 属性と visibility 属性の違い：

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

自分で試してみる

例 3

要素の隠しと表示切り替え：

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

自分で試してみる

例 4

画像要素 <img> を隠して表示する：

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

自分で試してみる

例 5

返却 <p> 元素の可視性タイプ：

alert(document.getElementById("myP").style.visibility);

自分で試してみる