css div 表示 div を非表示-フロントエンドQ&A-php.cn

css div 表示 div を非表示

WBOY

リリース： 2023-05-27 11:09:39

オリジナル

961 人が閲覧しました

CSS は Web デザインと開発において非常に重要なテクノロジであり、CSS では要素の表示と非表示が一般的なタスクです。この記事ではCSSを使ってDIV要素を表示・非表示にする方法を紹介します。

CSS では、display 属性を使用して要素の表示と非表示を制御できます。表示属性は次の値に設定できます。

none (要素を非表示)
block (要素をブロック要素として表示)
inline (要素をインライン inline-block として表示します (要素を inline-block 要素として表示します)
次のコード例は、display 属性を使用して DIV 要素を表示および非表示にする方法を示しています。

.hide {
  display: none;
}

.show {
  display: block;
}

ログイン後にコピー

この例の .hide クラスは、要素の表示を none に設定します。これにより、要素が非表示になります。代わりに、.show クラスは要素をブロックに設定し、これにより要素が表示されます。

次に、JavaScript を使用して DIV 要素を動的に表示および非表示にする方法を見てみましょう。

まず、getElementById メソッドを使用して、表示または非表示にする要素の参照を取得し、要素のスタイル表示プロパティを none または block に設定して、要素を非表示または表示します。

//隐藏元素
var element = document.getElementById("element-id");
element.style.display = "none";

//显示元素
element.style.display = "block";

ログイン後にコピー

ただし、JavaScript を使用して要素の表示/非表示を手動で制御する場合には、いくつかの欠点があります。まず、比較的冗長なコードが必要であり、要素の状態を明示的に処理する必要があるため、コードの保守が困難になります。次に、大規模な Web サイトでは、ページ要素のスタイルを動的に切り替えると、ブラウザのパフォーマンスが低下する可能性があります。

したがって、CSS の :focus 疑似クラスを使用して、動的な要素の表示および非表示効果を実現できます。ユーザーが要素をクリックすると、その要素はフォーカスを取得し、:focus 状態で CSS スタイルを適用できます。

たとえば、以下のコードでは、ユーザーが要素をクリックしたときに表示される要素の :focus スタイルを定義します。ユーザーがページ上のフォーカスの外にある別の要素をクリックすると、その要素は再び非表示になります:

.element:focus {
  display: block;
}

.element {
  display: none;
}

ログイン後にコピー

:focus 疑似クラスを使用する場合、ロジックを管理するために JavaScript を使用する必要はありません。 CSS の動的要素の非表示と表示だけを使用してそれを行うことができます。これにより、コードがより明確になり、保守が容易になります。

最後に、CSS と JavaScript を使用して要素の表示と非表示を制御する方法があります。これは HTML チェックボックス要素に基づいています。チェックボックスをオンにすると、関連する要素が表示されます。それ以外の場合、要素は非表示になります。

このメソッドを実装するための鍵は、CSS の :checked 疑似クラスを使用することです。これは、:checked に関連付けられた要素が選択されたときにアクティブ化されます。この効果を実現するには、要素と関連するチェックボックスの間にいくつかの CSS ルールを追加する必要があります。

次のコードは、チェックボックスを使用して要素を表示および非表示にする方法を示しています:

<input type="checkbox" id="checkbox-id">
<label for="checkbox-id">显示隐藏元素</label>
<div class="element">隐藏的元素</div>

ログイン後にコピー

/* 隐藏元素 */
.element {
  display: none;
}

/* 复选框被选中时显示元素 */
#checkbox-id:checked ~ .element {
  display: block;
}

ログイン後にコピー

この例では、チェックボックスと関連付けられたラベルを使用します。ユーザーがクリックしたときチェックボックスは次のときに選択されます。ラベリング。チェックボックスをオンにすると、.element 要素の表示スタイルがブロックに設定され、要素が表示されます。

まとめると、CSSのdisplay属性を利用することで、Webデザインにおける要素の表示・非表示を行うことができます。場合によっては、JavaScript または :focus 疑似クラスを使用して動的な効果を実現できます。また、チェックボックスを使用することもこの効果を実現する方法です。実際のニーズに基づいて、最適な方法を選択できます。

以上がcss div 表示 div を非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。