How to hide elements in css3 (two methods)

CSS3 hidden technology allows you to effectively control page layout and content display

In web page production, CSS3 provides many excellent technologies, allowing developers to more flexibly control the layout and content display of web pages. Among them, CSS3 hiding technology is a very important technology that allows you to hide some content that does not need to be displayed on the web page, thereby making the page more concise and clear, and providing a better user experience.

1. Overview

In web pages, hiding elements is a common operation, usually because the page needs to dynamically display content according to different situations, or needs to achieve some special style effects. Of course, if you want to hide an element in a web page, the traditional approach is to set its display attribute to none. However, although this method can achieve the effect of hiding elements, the hidden element will be completely removed from the page, and the layout space it occupies will also disappear. If it needs to be displayed later, the layout will need to be rebuilt. Cause unnecessary trouble.

CSS3 provides two properties: visibility and opacity, which can hide elements without removing them from the page. Both properties control the transparency of an element, but their effects are slightly different. The visibility attribute can hide an element and retain its layout space; while the opacity attribute can control the transparency of an element, retaining its layout space even if it is invisible.

2. How to use

①. Use the visibility attribute to hide

You can set the visibility attribute of the element to hidden or collapse. Among them, hidden means hiding the element and retaining its layout space on the page; collapse is only applicable to table elements, indicating hiding columns or rows and eliminating its layout space on the page.

For example, the following is a sample code that hides an element and then displays it:

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

In this sample code, the visibility attribute of the target element is first set to hidden, but it layout space remains within the page. You can then redisplay the element on the page by setting its visibility property to visible via JavaScript.

②. Use the opacity attribute to hide

In order to use the opacity attribute to hide an element, the transparency of the element must be set to 0. This way, even if the element is not visible, its layout space is retained on the page. Likewise, you can set the element's transparency to 1 via JavaScript, redisplaying it on the page.

For example, the following is a sample code that hides an element and then displays it:

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

In this sample code, first set the opacity attribute of the target element to 0, so that it It is hidden and the layout space on the page is retained. You can then display the element again by setting its opacity property to 1 via JavaScript.

3. Summary

In web page production, hiding elements is a very common operation. The traditional method of hiding elements usually leads to unnecessary layout, style and other problems on the page. CSS3 hiding technology provides two attributes, visibility and opacity, which can hide elements and retain their layout space, achieving a more efficient and simpler page layout and content display effect.

The above is the detailed content of How to hide elements in css3 (two methods). For more information, please follow other related articles on the PHP Chinese website!