div CSSを表示および非表示にする方法

CSS で div を表示または非表示にする方法: 1. CSS の display 属性を使用して div を非表示または表示します; 2. CSS の Visibility 属性を使用して div を非表示または表示します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS div を表示または非表示にする 3 つの方法 (表示と可視性の違い)

1. CSS の display 属性を使用して div を非表示または表示します:

display 属性は、要素が生成するボックスのタイプを指定します。display: none を使用して要素を非表示にできます。

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

2. CSS の可視性属性を使用して、div を非表示または表示します:

可視性属性は、要素が表示されるかどうかを指定します。要素は、visibility: hidden によって非表示にできます。

style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//隐藏
document.getElementById("div1").style.visibility="visible";//显示

表示属性と可視属性の違い:

表示属性は要素の表示方法を設定し、可視属性は要素を表示するか非表示にするかを指定します。

要素を非表示にする -display:none または Visibility:hidden

display 属性を none に設定するか、visibility 属性を hidden に設定して、要素を非表示にします。ただし、これら 2 つの方法では異なる結果が得られることに注意してください。

visibility:hidden: 要素は非表示にすることができますが、非表示の要素は非表示になる前と同じスペースを占有する必要があります。つまり、要素は非表示であっても、レイアウトには影響します。 。

h1.hidden {visibility:hidden;}

display:none: 要素は非表示にすることができ、非表示の要素はスペースを占有しません。つまり、要素が非表示になるだけでなく、その要素が元々占めていたスペースもページ レイアウトから消えます。

h1.hidden {display:none;}

つまり、display と Visibility は、それぞれ HTML 要素が存在するかどうかと、それが表示されるかどうかを制御します。dispay の属性は、要素が存在するかどうかを定義し、visibility 属性は、要素が表示されるかどうかのみを制御します。実際には、 、まだ存在します。

[推奨学習: css ビデオ チュートリアル ]

JQuery の show() メソッドと Hide() メソッドを使用して div を表示または非表示にします:

• show() メソッドは、選択した要素の表示と非表示を実装します。

注: show() は、jQuery メソッドと CSS の display:none によって非表示になった要素に適用されます (適用します)可視性:非表示から非表示の要素まで)。

構文: $ (selector).show(speed,easing,callback) 特定のパラメータの詳細については、ここをクリックしてください

$("button").click(function(){
    $("p").show();
});

• hide() メソッドは、選択された要素の非表示を実装します。 :

ヒント: これは、CSS プロパティの display:none に似ています。

注: 非表示の要素は完全には表示されません (ページのレイアウトには影響しません)。

構文: $ (selector).hide(speed,easing,callback) 特定のパラメータの詳細については、ここをクリックしてください

$("button").click(function(){
    $("p").hide();
});

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