HTML 非表示要素-htmlチュートリアル-php.cn

HTML 非表示要素

PHPz

リリース： 2024-09-04 16:42:32

オリジナル

512 人が閲覧しました

HTML5 の非表示グローバル属性はブール属性です。これは、ターゲット要素が HTML ドキュメントにさらに関連するかどうかを規定します。隠し属性を使用する例の 1 つは、ユーザーが認証されない限り許可されていない HTML Web ページ上に存在する特定のコンテンツをカバー/露出するために利用できることです。それまでは、ブラウザーはアクティブな非表示プロパティ (つまり、属性が設定されている) を持つ要素をレンダリングしません。

隠し属性の使用法

このような隠し属性の使用法の 1 つは、いくつかの条件 (ラジオボタンの選択など) が満たされるまでユーザーが要素を見ないようにするようなもので、その後、JavaScript コードで隠し属性を規定することができます。したがって、要素が表示されます。この属性は、個々のプレゼンテーションのためだけにコンテンツを隠すために利用すべきではありません。むしろ、コンテンツが非表示になっている場合は、すべてのプレゼンテーションで同じ状態を維持する必要があります。

非表示のコンテンツは、非表示になっていないコンテンツ、またはまだアクティブな非表示のコンテンツの子孫であるコンテンツと関連付けるべきではありません。これにより、フォーム要素を送信したり、スクリプト要素を実行したりできることが保証されます。ただし、スクリプトと要素は、他のコンテキストに隠されているコンテンツを参照できます。

を利用するのは完全に間違っています。実際のシナリオでは、属性を使用して、隠し属性で発音されたセクションに接続します。リンクされたコンテンツが関連性も該当性もない場合は、それらをまとめてパックする必要はありません。 Hidden 属性の定義に従って、hidden 属性を使用して HTML Web ページ内に存在するコンテンツを非表示にし、その後 JavaScript コードを使用してそのコンテンツにアクセスできるようになります。要素を非表示にするターゲットは、表示プロパティとしてプロパティを使用する (つまり none に設定する) CSS によっても実現できますが、hidden 属性を使用する方が簡単な方法です。

注: hidden 属性を持つ要素の CSS 表示プロパティ値を変更すると、その動作がオーバーライドされます。たとえば、display: flex としてスタイル設定された要素は、hidden 属性の存在にもかかわらず表示されます。

構文

<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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

出力:

HTML 非表示要素

例 #3 – 属性の有用性。

Hidden 属性の定義に従って、hidden 属性を使用して HTML Web ページ内に存在するコンテンツを非表示にすることができ、その後 JavaScript コードを使用してそのコンテンツにアクセスできるようになります。要素を非表示にするターゲットは、表示プロパティとしてプロパティを使用する (つまり、none に設定する) CSS によっても実現できますが、hidden 属性を使用する方が簡単な方法です。したがって、hidden 属性を持つコンテンツは DOM の一部であると言えますが、ユーザーはアクセスできません。

以下の例では、を選択します。 JavaScript コードを使用した非表示要素の一部:

コード:

<!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>

ログイン後にコピー

出力:

HTML 非表示要素

覚えておくべき重要なポイント

以下は、hidden 属性を操作する前によく知っておくべき重要な点です。

個別の解像度と画面サイズでアクセスできるコンテンツでは、コンテンツを非表示にするための hidden 属性を使用しないでください。
hidden 属性は、コンテンツスイッチャーまたはタブコンポーネントの非表示セクションを非表示にしたり覆い隠したりするのに役立ちません。
非表示でない要素は、非表示の要素にハイパーリンクしないでください。
非表示としてマークアップされている要素は、依然としてアクティブである可能性があります。
すべてのユーザーに対してコンテンツを非表示にしたい場合は、HTML5 の非表示属性を使用します (CSS 表示とともに、非表示をサポートしていないブラウザの場合はなし)。 aria-hidden を使用する必要はありません。