ホームページ > 記事 > ウェブフロントエンド > HTML 非表示要素
HTML 非表示要素
- PHPzオリジナル
- 2024-09-04 16:42:32522ブラウズ
HTML5 の非表示グローバル属性はブール属性です。これは、ターゲット要素が HTML ドキュメントにさらに関連するかどうかを規定します。隠し属性を使用する例の 1 つは、ユーザーが認証されない限り許可されていない HTML Web ページ上に存在する特定のコンテンツをカバー/露出するために利用できることです。それまでは、ブラウザーはアクティブな非表示プロパティ (つまり、属性が設定されている) を持つ要素をレンダリングしません。
隠し属性の使用法
このような隠し属性の使用法の 1 つは、いくつかの条件 (ラジオ ボタンの選択など) が満たされるまでユーザーが要素を見ないようにするようなもので、その後、JavaScript コードで隠し属性を規定することができます。したがって、要素が表示されます。この属性は、個々のプレゼンテーションのためだけにコンテンツを隠すために利用すべきではありません。むしろ、コンテンツが非表示になっている場合は、すべてのプレゼンテーションで同じ状態を維持する必要があります。
非表示のコンテンツは、非表示になっていないコンテンツ、またはまだアクティブな非表示のコンテンツの子孫であるコンテンツと関連付けるべきではありません。これにより、フォーム要素を送信したり、スクリプト要素を実行したりできることが保証されます。ただし、スクリプトと要素は、他のコンテキストに隠されているコンテンツを参照できます。
構文
<element hidden> </element>
HTML 非表示要素の例
以下は HTML 非表示要素の例です:
例 #1
コード:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>
出力:
例 #2
コード:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>
出力:
例 #3 – 属性の有用性。
Hidden 属性の定義に従って、hidden 属性を使用して HTML Web ページ内に存在するコンテンツを非表示にすることができ、その後 JavaScript コードを使用してそのコンテンツにアクセスできるようになります。要素を非表示にするターゲットは、表示プロパティとしてプロパティを使用する (つまり、none に設定する) CSS によっても実現できますが、hidden 属性を使用する方が簡単な方法です。したがって、hidden 属性を持つコンテンツは DOM の一部であると言えますが、ユーザーはアクセスできません。
以下の例では、
コード:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>
出力:
覚えておくべき重要なポイント
以下は、hidden 属性を操作する前によく知っておくべき重要な点です。
- 個別の解像度と画面サイズでアクセスできるコンテンツでは、コンテンツを非表示にするための hidden 属性を使用しないでください。
- hidden 属性は、コンテンツ スイッチャーまたはタブ コンポーネントの非表示セクションを非表示にしたり覆い隠したりするのに役立ちません。
- 非表示でない要素は、非表示の要素にハイパーリンクしないでください。
- 非表示としてマークアップされている要素は、依然としてアクティブである可能性があります。
- すべてのユーザーに対してコンテンツを非表示にしたい場合は、HTML5 の非表示属性を使用します (CSS 表示とともに、非表示をサポートしていないブラウザの場合はなし)。 aria-hidden を使用する必要はありません。
結論
以下に、このトピックで覚えておくべき主要なポイントをいくつか示します。
隠し属性の適切な使用例は次のとおりです:
- まだ関連性はないが、後で必要になる可能性があるコンテンツ。
- 以前は使用されていたが、もう必要なくなったコンテンツ。
- 再利用可能で、テンプレートのような方法でページの他のさまざまな部分で利用されるコンテンツ。
- 描画バッファとしてオフスクリーン キャンバスを作成します。
非表示属性の不適切な使用例には以下が含まれます:
- タブ付きダイアログ ボックス内のパネルを非表示にします。
- 他のプレゼンテーションでは表示されるように意図しながら、個々のプレゼンテーションでコンテンツを非表示にする。
以上がHTML 非表示要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。