Detailed explanation of the difference between display and visibility attributes in div

The difference between the display and visibility attributes in p

The difference between the display and visibility attributes in p is quite big. Although both the Visibility and Display attributes can achieve the purpose of hiding page elements, their difference lies in how to respond normally Document flow

This section describes the difference between display and visibility in p. The visibility attribute hides the element but maintains the floating position of the element, while display actually sets the floating characteristics of the element, although they can both be achieved. The purpose of hiding page elements, but what differentiates them is how they respond to normal document flow.

The difference between display and visibility attributes in p

visibility attribute:

Determine whether the element is displayed or hidden;
visibility ="visible|hidden", visible is displayed, hidden is hidden.

When visibility is set to "hidden", although the element is hidden, it still occupies its original position.

For example:

<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>

See the first line: due to the influence of "hidden" and "visible". Because visibility retains the position of the element, the second line will not move.
Notice that when the element is hidden, it can no longer receive other events, so when the first line of code becomes "hidden", It can no longer receive response events, so it cannot be displayed by clicking the first text with the mouse.

display attribute:

It’s a little different. The visibility attribute hides the element but maintains its floating position, while display actually sets the floating characteristics of the element.

block:
When display is set to block, all elements in the container will be treated as a single block, just like the

element, which will Points are placed on the page. (You can actually set the display:block of so that it works like

.

inline:
Setting display to inline will make it behave like the element is inline Same --- even if it is a normal block element like

, it will be combined into an output stream like

none:
Finally the display is set: none, at this time the element is actually removed from the page, and the elements below it will be automatically filled in.

For example:

Look at the code and effect of my example below. :
Example:

<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>

The above is the detailed content of Detailed explanation of the difference between display and visibility attributes in div. For more information, please follow other related articles on the PHP Chinese website!