The difference between display and visibility in CSS properties

Source: Internet
Author: User

Most people can easily confuse CSS property display with visibility, they seem to be no different, in fact, their differences are very large.
The visibility property is used to determine whether an element is displayed or hidden, which is represented by the visibility= "Visible|hidden", the visible representation of the display, and the hidden representation of the hidden. When visibility is set to "hidden", the element is hidden, but it still occupies its original position. Cases:

<script language= "JavaScript" >
function Togglevisibility (Me) {
if (me.style.visibility== "hidden") {
me.style.visibility= "visible";
}
else {
Me.style.visibility= "hidden";
}
}
</script>


<div onclick= "togglevisibility (This)" style= "position:relative" >
The first line of text will trigger the "hidden" and "visible" properties, noting the change in the second line. </div><div> because visibility retains the position of the element, the second row does not move .</div>

The first line of text will trigger the "hidden" and "visible" properties, noting the change in the second line. Because visibility retains the position of the element, the second row does not move.

Notice that when the element is hidden, it is no longer possible to receive other events, so in the first code, when it is set to "hidden", it can no longer receive the response to the event, so it is not possible to click the first paragraph of the mouse to display the text. On the other hand, the display property is a little different. The Visibility property is a hidden element but maintains the floating position of the element, and display is actually a floating feature of the set element. When display is set to block, all elements in the container will be treated as a separate block, like the <div> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <div>.) Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <DIV>, it will also be combined to image <span> that output stream. Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded. Here's a look at the code and effects of my example:

Cases:

<script language= "JavaScript" >
function Toggledisplay (Me) {
if (me.style.display== "block") {
me.style.display= "inline";
Alert ("The text is now: ' inline '.");
}
else {
if (me.style.display== "inline") {
Me.style.display= "None";
Alert ("The text is now: ' None '.) Automatically re-displays after 3 seconds. ");
Window.settimeout ("bluetext.style.display= ' block ';", +, "JavaScript");
}
else {
me.style.display= "Block";
Alert ("The text is now: ' Block '.");
}
}
}
</script>


<div> in <span id= "Bluetext" onclick= "Toggledisplay (This)"
Style= "Color:blue;position:relative;cursor:hand;" > Blue </span> Text Click to see the effect .</div>

Effect:

InClick on the blue text to see the effect.

The difference between display and visibility in CSS properties

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.