div의 표시 속성과 가시성 속성의 차이점에 대한 자세한 설명

p에서 표시 속성과 가시성 속성의 차이

p에서 표시 속성과 가시성 속성의 차이는 상당히 큽니다. 가시성과 표시 속성 모두 페이지 요소를 숨기는 목적을 달성할 수 있지만 차이점은 일반 요소에 어떻게 대응하느냐에 있습니다. 문서 흐름

이 섹션에서는 표시와 표시 여부의 차이점을 설명하겠습니다. 표시 속성은 요소를 숨기지만 요소의 부동 위치를 유지하는 반면, 표시는 둘 다 가능하지만 실제로 요소의 부동 특성을 설정합니다. 페이지 요소를 숨기는 목적을 달성하는 방법은 일반적인 문서 흐름에 어떻게 대응하느냐에 따라 다릅니다.

p

visibility 속성의 표시 속성과 가시성 속성의 차이점:

요소가 표시되는지 또는 숨겨지는지 여부를 결정합니다.
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>

첫 번째 줄을 참조하세요: "숨김"과 "표시"의 영향으로 인해. 가시성은 요소의 위치를 ​​유지하므로 두 번째 줄은 이동하지 않습니다.
요소가 숨겨지면 더 이상 다른 이벤트를 받을 수 없으므로 코드의 첫 번째 줄이 "숨겨지면" 이벤트를 받을 수 없습니다. 더 이상 수신되지 않으므로 마우스를 클릭해도 첫 번째 텍스트가 표시되지 않습니다.

표시 속성:

은 조금 다릅니다. 가시성 속성은 요소를 숨기지만 부동 위치를 유지하는 반면, 표시는 실제로 요소의 부동 특성을 설정합니다.

block:
display가 block으로 설정되면 컨테이너의 모든 요소는 e388a4556c0f65e1904146cc1a846bee 요소와 마찬가지로 단일 블록으로 처리되며 페이지의 해당 지점 중간에 배치됩니다. (실제로 45a2772a6b6107b401db3c9b82c049c2의 디스플레이:블록을 설정하여 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의 표시 속성과 가시성 속성의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!