Comparison of several methods for CSS "hidden" elements and css Methods

Comparison of several methods for CSS "hidden" elements and css Methods

When talking about CSS hidden elements, I think most of my friends will think of the first way to set display to none. This is the most well-known and commonly used method. I believe that many people think of setting visibility to Den den to hide elements. This method is also a common method, and many people know the differences between the two. In addition to the two methods, this article also summarizes some of the less commonly used methods and compares the differences and advantages and disadvantages of these "hidden" element methods !!

A Brief Introduction to several methods

First of all, let's talk about the several methods to hide elements. Some methods are well known and some are a skill.

Display: none

Setting the display of an element to none is the most common method to hide the element.

1 .hide {2     display:none;3 }

After the element is set to display: none, the element disappears completely on the page, and the space occupied by the element will be occupied by other elements, that is, it will lead to browser re-arrangement and re-painting.

Visibility: hidden

Setting the visibility of an element to hidden is also a common method for hiding elements. The difference between setting the visibility of an element and display: none is that the occupied space of an element remains after the page disappears, so it will only cause the browser to re-paint and will not re-arrange.

1 .hidden{2     visibility:hidden3 }

Visibility: hidden applies to scenarios where elements are hidden and do not want the page layout to change.

Opacity: 0

Opacity attributes I believe everyone knows the transparency of elements. After the transparency of elements is set to 0, elements are also hidden in the eyes of our users. This is a method to hide elements.

1 .transparent {2     opacity:0;3 }

This method is similar to visibility: one common feature of hidden is that the hidden elements still occupy space, but we all know that after the transparency is set to 0, the elements are only invisible and still exist on the page.

Set the box model attributes such as height and width to 0.

This is an amazing technique I have summarized. Simply put, we set the attributes of the elements such as margin, border, padding, height, and width that affect the element box model to 0, if the element contains sub-elements or content, you should set its overflow: hidden to hide its sub-elements. This is an amazing trick.

1 .hiddenBox {2     margin:0;3     border:0;4     padding:0;5     height:0;6     width:0;7     overflow:hidden;8 }

This method is neither practical nor problematic. However, some of the page effects we usually use may be completed in this way. For example, in jquery's slideUp animation, it is to set the overflow of the element: hidden, and then through the timer, continuously set the height, margin-top, margin-bottom, border-top, border-bottom, padding-top, and padding-bottom of an element to 0 to achieve the effect of slideUp.

Event Response after element hiding

If hidden elements are bound to some events, will these events be responded to and executed after relevant operations are performed? Let's look at the following code:

 1 <style> 2     div {  3         width: 100px;  4         height: 100px;  5         background: red;  6         margin: 15px;  7         padding: 10px;  8         border: 5px solid green;  9         display: inline-block; 10         overflow: hidden; 11     }12     .none { display: none; }13     .hidden { visibility: hidden; }14     .opacity0 { opacity: 0; }15     .height0 { height: 0; }  16 </style>  17 18 <div class="none"></div>19 <div class="hidden"></div>20 <div class="opacity0"></div>21 <div class="height0">aa</div>  22 23 <script src="/Scripts/jquery-1.10.2.min.js"></script>24 <script>25     $(".none").on("click", function () {26         console.log("none clicked");27     })28     $(".hidden").on("click", function () {29         console.log("hidden clicked");30     })31     $(".opacity0").on("click", function () {32         console.log("opacity0 clicked");33     })34     $(".height0").on("click", function () {35         console.log("height0 clicked");36     })37 </script>

This code displays the four hidden element methods separately, binds them to the click event, and passes the test. The main conclusions are as follows:

1. display: none: the element disappears completely, and the click event is obviously not triggered.
2. visibility: hidden: The click event cannot be triggered. The following statement is true: display: none is invisible to elements, while visibility: hidden is invisible. This statement is inaccurate, after setting the visibility of an element, the click event cannot be triggered, indicating that the method element disappears, but still occupies the page space.
3. opacity: 0: The click event can be triggered for a simple reason. After the transparency of an element is set to 0, the element does not exist with the human eye. For the browser, it still exists, therefore, click events can be triggered.
4. height: 0: Set the height of the element to 0 and overflow: hidden. This method is used to hide elements. whether an event can be triggered depends on the actual situation. If attributes such as border and padding are not set to 0, it is clear that this element is still visible on the page, and the Click Event of the trigger element is no problem at all. If all attributes are set to 0, it is clear that this element disappears, and the click event cannot be triggered.

But are these conclusions true?
In the above Code, we add the following code:

1 $(".none").click();

The result shows that the click event is triggered, that is, the event of the element set to display: none can be triggered through JS.
So the real reason why the previous click event cannot be triggered is that the mouse cannot really touch the elements set to hidden !!!

Effects of CSS3 transition on these methods

The transition provided by CSS3 greatly improves the compilation of webpage animations, but not every CSS attribute can be animated through transition. The modified code is as follows:

 1 <style> 2     div {  3         width: 100px;  4         height: 100px;  5         background: red;  6         margin: 15px;  7         padding: 10px;  8         border: 5px solid green;  9         display: inline-block; 10         overflow: hidden; 11         transition: all linear 2s;  12     }13 </style>  14 15 <div class="none"></div>16 <div class="hidden"></div>17 <div class="opacity0"></div>18 <div class="height0">aa</div>  19 20 <script src="/Scripts/jquery-1.10.2.min.js"></script>21 <script>22 $(".none").on("click", function () {23     console.log("none clicked");24     $(this).css("display", "none");25 })26 $(".hidden").on("click", function () {27     console.log("hidden clicked");28     $(this).css("visibility", "hidden");29 })30 $(".opacity0").on("click", function () {31     console.log("opacity0 clicked");32     $(this).css("opacity", 0);33 })34 $(".height0").on("click", function () {35     console.log("height0 clicked");36     $(this).css({37         "height": 0,38     });39 })40 </script>

After testing, we can see that:
1. display: none: completely unaffected by the transition attribute. The element disappears immediately.
2. visibility: hidden: the time when the element disappears is the same as the time set in the transition attribute, but the animation effect is not displayed.
3. The opacity and height attributes can be used for normal animation.

Suppose we want to use CSS3 to make a fade-out animation, we should do the following:

1 .fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }2     .fadeOut:hover { visibility: hidden; opacity: 0; }

Set the visibility and opacity attributes of the element at the same time.

Summary

This article summarizes several methods of "hiding" elements, the most common of which is display: none and visibility: hidden. Other methods can only be regarded as magical and clever. We do not recommend that you use them to hide elements. Their actual purpose should not be to hide elements. Instead, we can discover the characteristics of these methods and find out their actual use cases. Welcome to our discussion !!

 

URL: http://luopq.com/2016/02/15/tricks-of-hide-element /.