9 ways to show and hide CSS elements

In web page production, displaying and hiding elements is a very common requirement. This article will introduce 9 ideas for displaying and hiding elements

display

The most common way to show and hide an element is display:none | display:block. However, there is a problem with this method. The display attribute of an element is not always block before it is hidden. It may also be inline, inline-block, etc.

Note: If you want to apply it to any element, you need to store the element's display value in advance

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test text</div>

<script>
show.onclick = function(){
    test.style.display = 'block';
}    
hide.onclick = function(){
    test.style.display = 'none';
}
</script>

visibility

Visibility:hidden and display:none are two ways to hide elements and are often compared. In fact, the difference is very simple. The former does not leave the document flow and retains the physical area occupied by the element before hiding; while the latter is separated from the document flow, and the page needs to be redrawn if it is redisplayed. There is another difference that few people mention. If the parent is set to display:none, the child will not be displayed if it is set to display:block. However, if the parent is set to visibility:hidden, the child will be displayed if visibility:visible is set.

Note: Visilibity can apply the transition attribute. Because visibility is a discrete step, within the range of 0 to 1, 0 means hidden and 1 means shown. visibility:hidden can be seen as visibility:0; visibility:visible can be seen as visibility:1. Therefore, visibility applying transition is equivalent to the transition effect between 0 and 1. In fact, as long as the visibility value is greater than 0, it is displayed. Because of this phenomenon, we can use transition to delay the display and hiding of elements.

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test text</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}
</script>

hidden

Some people may not be familiar with it. HTML has a hidden global attribute, which is specifically used to display hidden elements. It is similar to display:none. When an element is hidden, it is out of the document flow and cannot receive JavaScript events.

Note: IE10- does not support the test.hidden='hidden' method, only supports the test.setAttribute('hidden','hidden') method

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test text</div>

<script>
show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
</script>    

opacity

Opacity is also used quite frequently to make elements visible and invisible. The benefit of opacity is that even an element with an opacity of 0 can still receive JavaScript events, which is not available for display:none and visibility:hidden.

<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="reset">Reset</button>
<div id="test">Test text</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}
</script>  

overflow

There is a property in CSS called overflow, overflow:hidden means overflow is hidden. We can use the parent's overflow:hidden with the parent's height:0 or width:0 to make the element visible and invisible.

Note: When the element with overflow is between the absolutely positioned element and its containing block, the overflow property will become invalid.

<style>
#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}
</style>

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="testWrap">
    <div id="test">Test content</div>        
</div>

<script>
show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}
</script>    

clip

The CSS clipping attribute is not often used. When top>=bottom or left>=right in clip:rect(top,right,bottom,left), the element can be hidden, which is similar to visibility:hidden.

Note: The clip attribute can only be applied to absolutely positioned elements.

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>    

<script>
show.onclick = function(){
    test.style.position = 'static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position = 'absolute';
    test.style.clip = 'rect(0 0 0 0)';
}
</script>    

transform

CSS transformation is a collection of effects, mainly the four basic operations of moving, rotating, scaling and tilting. More complex effects can also be achieved by setting the matrix. Different deformation functions can be used to achieve element visibility effects

Note: IE9- browsers are not supported, Safari3.1-8, Android2.1-4.4.4, IOS3.2-8.4 all need to add prefixes

【1】scale

When transform:scale(0), the element is hidden

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>    

<script>
show.onclick = function(){
    test.style.transform = 'scale(1)';
}    
hide.onclick = function(){
    test.style.transform = 'scale(0)';
}
</script>    

【2】rotate

When transform:rotateX(90deg), the element is hidden

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>

<script>
show.onclick = function(){
    test.style.transform = 'rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform = 'rotateX(90deg)';
}
</script>

【3】skew

When transform:skew(90deg), the element is hidden

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>

<script>
show.onclick = function(){
    test.style.transform = 'skew(0)';
}    
hide.onclick = function(){
    test.style.transform = 'skew(90deg)';
}
</script>

cover

Positioned elements can be used to override the properties of normal flow elements. Set the same size for the element's before pseudo-element, and achieve the visibility effect by controlling the positioning attributes of the pseudo-element

<style>
#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}    
</style>

<div>Test content</div>
//Move the mouse in and out to show and hide the element

Offset

Another common way to show and hide elements is to offset them. Moving the elements outside the viewport can also achieve the equivalent show and hide effect.

【1】margin-top

Use negative margin to move elements out of the window. Note that elements with negative margin do not leave the normal flow, and subsequent elements will move with it.

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>

<script>
show.onclick = function(){
    test.style.marginTop = '10px';
}    
hide.onclick = function(){
    test.style.marginTop = '-9999px';
}
</script>

【2】left

Move elements outside the viewport by setting the offset property of relatively or absolutely positioned elements

<style>
#test{
    position: relative;
/* position: absolute; */
}    
</style>

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>

 <script>
show.onclick = function(){
    test.style.left = '0';
}    
hide.onclick = function(){
    test.style.left = '-9999px';
}
</script>    

【3】translate

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="test">Test content</div>    

<script>
show.onclick = function(){
    test.style.transform = 'translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform = 'translate(-9999px,-9999px)';
}
</script>    

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.