HTML DOMスタイルのvisibility（可視性）プロパティの使い方を解説
HTML DOMのスタイルにおけるvisibilityプロパティは、HTMLドキュメント内の要素を表示するか非表示にするかを、取得および設定するためのプロパティです。要素の可視性を動的に制御したい場合に活用できます。
構文（Syntax）
visibilityプロパティの基本的な構文は以下の通りです。
可視性の値を取得する場合
object.style.visibility
可視性の値を設定する場合
object.style.visibility = "value"
設定できる値（Values）
valueには以下のいずれかの値を指定できます。
| 値 | 説明 |
|---|---|
| initial | このプロパティの値をデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティの値を継承します。 |
| hidden | 要素は非表示になりますが、レイアウト上のスペースは確保されたままとなります。 |
| visible | 要素が表示されます（デフォルト値）。 |
| collapse | テーブルの行や列の要素を非表示にします。ただし、レイアウトへの影響は残ります。テーブル以外の要素ではhiddenと同様に動作します。 |
サンプルコード（Example）
ここで、HTML DOMスタイルのvisibilityプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、段落要素が非表示になるシンプルなデモです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style visibility Property Example</h1>
<p>I'm paragraph element with some dummy text</p>
<button onclick="add()" class="btn">Set visibility</button>
<script>
function add() {
document.querySelector('p').style.visibility = "hidden";
}
</script>
</body>
</html>実行結果（Output）
このコードを実行すると、以下のような出力が得られます。
「Set visibility」ボタンをクリックすると、段落要素に対してvisibilityプロパティに「hidden」が設定され、次のようにテキストが非表示になります。
まとめ
visibilityプロパティを使うことで、JavaScriptから簡単に要素の表示・非表示を切り替えることができます。「display: none」と異なり、「visibility: hidden」は要素の領域が保持されるため、レイアウトを崩したくない場合に特に便利です。用途に応じて使い分けてみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri