css hide show div

CSS Hide and Show DIV

In web development, hiding and showing elements is a frequently used task, especially when creating dynamic effects. Using CSS can easily hide and show elements, and it can also make the website load faster and improve user experience.

1. display attribute

The display attribute can control how the element is displayed. It has the following values:

• none: indicates that the element is not displayed and takes up 0 space.
• block: Indicates that the element will be displayed as a block-level element, occupying one line.
• inline: Indicates that the elements will be displayed as inline elements, without line breaks, and arranged in sequence.
• inline-block: Indicates that the element will be displayed as an inline block-level element without line wrapping, but attributes such as width, height, padding, etc. can be set.
• table: Indicates that the element will be displayed as a table.
• table-cell: Indicates that the element will be displayed as a table cell.
• flex: Indicates that the element adopts flexible layout.
• grid: Indicates that the element adopts grid layout.

For example, we can use display:none to hide an element:

<div style="display:none;">这是一个被隐藏的元素</div>

Use display:block to display the element as a block-level element:

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. visibility attribute

The visibility attribute can control the visibility of an element. It has the following values:

• visible: indicates that the element is visible.
• hidden: Indicates that the element is not visible, but it will still take up space.

For example, we can use visibility:hidden to hide an element:

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

Use visibility:visible to display the element.

3. opacity attribute

The opacity attribute can control the transparency of an element. Its value range is 0 to 1, 0 means completely transparent, 1 means opaque.

For example, we can set an element to be semi-transparent:

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. CSS3 animation

In addition to the above three methods, we can also use CSS3 animation to hide and show elements. CSS3 animation can produce richer effects and enhance the interactivity of the website.

For example, we can use @keyframes to define a hidden-to-show animation:

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

In the above code, we first define a @keyframes rule, which defines the transition from transparency 0 to transparency 1 animation effect. Then set class="show" and initial transparency to 0 in the element. Finally, the animation attribute is added to the .show class in the style sheet, specifying the name, duration and style sheet state of the animation after it ends.

By controlling the addition and removal of this class, we can switch the display state of elements:

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

var div = document.getElementsByClassName("show")[0];
div.classList.remove("show");

Summary

The above content introduces how to hide and display elements using CSS. Methods, including display attribute, visibility attribute, opacity attribute and CSS3 animation. Mastering these methods can help us achieve more elegant and sophisticated web page effects.

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