How to show and hide div css

How to display and hide divs in css: 1. Use the display attribute of CSS to hide or display the div; 2. Use the visibility attribute of CSS to hide or display the div.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS Three ways to display or hide divs (the difference between display and visibility)

1. Use the display attribute of CSS to hide or show divs:

The display attribute specifies the type of box that the element should generate. You can hide an element by display: none.

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

2. Use the CSS visibility attribute to hide or show the div:

The visibility attribute specifies whether an element is visible. You can hide an element through visibility: hidden.

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

The difference between display and visibility attributes:

The display attribute sets how an element should be displayed, while the visibility attribute specifies whether an element should be visible or hidden.

Hide elements -display:none or visibility:hidden

Hide an element by setting the display attribute to none or the visibility attribute to hidden. Note, however, that these two methods will produce different results.

visibility:hidden: An element can be hidden, but the hidden element still needs to occupy the same space as before it was hidden. That is to say, although the element is hidden, it will still affect the layout.

h1.hidden {visibility:hidden;}

display:none: An element can be hidden, and the hidden element will not occupy any space. In other words, not only is the element hidden, but the space originally occupied by the element will also disappear from the page layout.

h1.hidden {display:none;}

So display and visibility control whether the html element exists and whether it is displayed respectively. The attribute of dispay defines whether the element exists or not, and the visibility attribute only controls whether the element is displayed. In fact, it still exists. .

[Recommended learning: css video tutorial]

Use JQuery’s show() and hide() methods to show or hide a div:

• show() method implements displaying and hiding selected elements:

Note: show() is applicable to elements hidden by jQuery method and display:none in CSS ( You apply visibility:hidden to hidden elements).

Syntax: $ (selector).show(speed,easing,callback) Click here for details of specific parameters

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

• hide() method implements hiding the selected elements:

Tip: This is similar to the CSS property display:none.

Note: Hidden elements will not be fully displayed (does not affect the layout of the page).

Syntax: $ (selector).hide(speed,easing,callback) Click here for details of specific parameters

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

The above is the detailed content of How to show and hide div css. For more information, please follow other related articles on the PHP Chinese website!