css 表示 非表示 div

CSS は Web デザインにおいて重要な役割を果たしており、Web ページを美しくするだけでなく、ユーザー インタラクション効果も実現します。この記事ではCSSを使ってdivを表示・非表示にする方法を解説します。

1. display 属性を使用して div を表示および非表示にします

display 属性は要素の表示モードを指定するために使用され、一般的な値は none と block です。このうち、none は要素を非表示にすることを意味し、block は要素をブロック要素として表示することを意味します。したがって、display 属性を制御することで div を表示または非表示にすることができます。

1.1 div の非表示

div を非表示にするには、その表示属性を none に設定するだけです。以下に例を示します。

<div id="myDiv" style="display:none;">这是要隐藏的div</div>

上記のコードでは、CSS でスタイルを設定するために div タグに id 属性を追加しました。同時に、div の表示属性を none に設定して非表示にします。

1.2 div の表示

非表示の div を表示するには、その表示属性を block またはその他の表示可能な値に設定するだけです。以下は例です:

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="display:none;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}
</script>

上記のコードでは、ボタンを追加し、それに onclick イベントをバインドしました。ユーザーがボタンをクリックすると、showDiv() 関数が呼び出され、div の表示属性をblockに設定すると表示されます。

2. 可視性属性を使用して div を表示および非表示にします

可視性属性は要素の可視性を指定するために使用され、共通の値が表示または非表示になります。このうち、hiddenは要素を隠すことを意味し、visibleは要素を可視にすることを意味します。したがって、visibility 属性を制御することで div を表示および非表示にすることもできます。

2.1 div の非表示

div を非表示にするには、その Visibility 属性を hidden に設定するだけです。以下に例を示します。

<div id="myDiv" style="visibility:hidden;">这是要隐藏的div</div>

上記のコードでは、CSS でスタイルを設定するために div タグに id 属性を追加しました。同時に、div の Visibility プロパティを hidden に設定して、非表示になるようにします。

2.2 div の表示

非表示の div を表示するには、その可視性プロパティを可視に設定するだけです。以下は例です:

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="visibility:hidden;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.visibility = "visible";
}
</script>

上記のコードでは、ボタンを追加し、それに onclick イベントをバインドしました。ユーザーがボタンをクリックすると、showDiv() 関数が呼び出され、div の可視化するには、visibility プロパティをvisibleに設定します。

3. 結論

上記の例を通じて、display 属性と Visibility 属性を使用して div の表示と非表示を実現できることがわかります。違いは、display 属性はページから要素を完全に削除するのに対し、visibility 属性は要素を非表示にするだけであることです。したがって、非表示と表示の間で要素の位置を保持する必要がある場合は、visibility 属性の使用を選択する必要があります。

もちろん、ユーザー エクスペリエンスを向上させるために、CSS アニメーションを使用して、div の表示と非表示にグラデーションやその他の効果を追加することもできます。これは、CSS のトランジションまたはアニメーション属性を組み合わせることによって実現する必要があります。興味のある読者は、関連するチュートリアルをオンラインで見つけることができます。

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