divのdisplay属性とvisibility属性の違いの詳しい説明

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

p の表示属性と可視性属性の違いは非常に大きく、Visibility 属性と Display 属性はどちらもページ要素を非表示にするという目的を達成できますが、その違いは通常の要素に応答する方法にあります。ドキュメント フロー

このセクションでは、表示と可視性の違いについて説明します。可視性属性は要素を非表示にしますが、要素の浮動位置を維持します。表示属性は実際には要素の浮動特性を設定します。ページ要素を非表示にするという目的を達成するか、その違いは通常のドキュメント フローにどのように対応するかによって異なります。

p

visibility属性のdisplay属性とvisibility属性の違い:

は要素が表示されるか非表示になるかを決定します。visibleは表示され、hiddenは非表示になります。

可視性を「非表示」に設定すると、要素は非表示になりますが、元の位置を占めます。

例:

<scriptlanguagescriptlanguage="javascript"> functiontoggleVisibility(me)  
{  
if(me.style.visibility=="hidden")  
{  
me.style.visibility="visible";  
}  
else  {  
me.style.visibility="hidden";  
}  
}  
</script> 
 
<ponclickponclick="toggleVisibility(this)"style="position:relative"> 第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。  
</p> 
<p>因为visibility会保留元素的位置，所以第二行不会移动.</p>

最初の行を参照してください: 「hidden」と「visible」の影響により。可視性は要素の位置を保持するため、2 行目は移動しません

要素が非表示になると他のイベントを受け取ることができなくなり、コードの最初の行が「非表示」になるとイベントを受け取ることができないことに注意してください。は受信されなくなったため、最初のテキストはマウスをクリックしても表示されません。

表示属性:

は少し異なります。可視性属性は要素を非表示にしますが、その浮動位置は維持しますが、表示は実際に要素の浮動特性を設定します。

block:

display が block に設定されている場合、コンテナ内のすべての要素は、e388a4556c0f65e1904146cc1a846bee 要素と同様に 1 つのブロックとして扱われ、ページの中央に配置されます。 (実際には、45a2772a6b6107b401db3c9b82c049c2 の display:block を設定して、e388a4556c0f65e1904146cc1a846bee のように動作させることができます。

inline:

表示をインラインに設定すると、要素がインラインであるかのように動作します --- たとえこれは e388a4556c0f65e1904146cc1a846bee などの通常のブロック要素であり、45a2772a6b6107b401db3c9b82c049c2 のような出力ストリームにも結合されます

none:

最後に、表示は none に設定され、要素は実際にブロック要素から削除されます。ページを移動すると、その下の要素が自動的に入力されます。

例:

以下の例のコードと効果を見てください:

例:

<scriptlanguagescriptlanguage="javascript"> functiontoggleDisplay(me){  
if(me.style.display=="block"){  
me.style.display="inline";  
alert("文本现在是：&#39;inline&#39;.");  
}  
else{  
if(me.style.display=="inline"){  
me.style.display="none";  
alert("文本现在是:&#39;none&#39;.3秒钟后自动重新显示。");  
window.setTimeout("blueText.style.display=&#39;block&#39;;",3000,"javascript");  
}  
else{  
me.style.display="block";  
alert("文本现在是:&#39;block&#39;.");  
}  
}  
}  
</script> 
 
<p>在<spanidspanid="blueText"onclick="toggleDisplay(this)"  style="color:blue;position:relative;cursor:hand;"> 蓝色</span>文字上点击来查看效果.</p>

。

以上がdivのdisplay属性とvisibility属性の違いの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。