JavaScript では、 スタイル.ディスプレイ または、 スタイル.可視性 。の 可視性 JavaScript のプロパティは、要素を非表示にするためにも使用されます。の違いは、 スタイル.ディスプレイ そして スタイル.可視性 使用時です 可視性: 非表示、 タグは表示されませんが、スペースが割り当てられます。使用する ディスプレイ: なし、 タグも表示されませんが、ページ上にスペースが割り当てられていません。
HTML では、 隠れた 属性を使用して、指定した要素を非表示にします。とき 隠れた HTML の属性が true に設定されている場合、要素が非表示になっている場合、または値が 間違い、 要素が表示されます。
構文
要素を非表示にするための一般的な構文 style.hidden そして スタイル.可視性 は次のように与えられる。
使用する style.hidden
document.getElementById('element').style.display = 'none';
使用する スタイル.可視性
document.getElementById('element').style.visibility = 'none';
次に、要素の非表示を理解するためにいくつかの例を見てみましょう。 JavaScript 。
例1
この例では、JavaScript を使用して要素を削除する方法を見ていきます。 スタイル.ディスプレイ 財産。ここに、 ディビジョン 要素と、指定されたクリック時に非表示になる段落要素 HTMLボタン 。をクリックする必要があります 「クリックしてください！」 ボタンをクリックして効果を確認します。
style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } 今すぐテストしてください 出力
出力では、次のことがわかります。 ディビジョン 要素 (適用した要素) スタイル.可視性 property) は非表示になっていますが、スペースは割り当てられています。しかし、見出し（私たちが適用したもの）は、 スタイル.ディスプレイ プロパティ）が隠蔽されており、スペースが割り当てられていません。
ボタンをクリックすると、結果は次のようになります -
