Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to control element hiding in css3. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Control mode: 1, use the "display:none" statement to remove the element from the accessibility tree, and then hide the element; 2, use the "visibility: hidden" statement to set the element invisible; 3, use the "opacity: 0" statement to set the element transparent; 4, let the element out of the screen display position and so on.

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

Css3 controls element hiding in the first way: remove the accessibility tree

Display: none

The display property sets the internal and external display types of the element. Setting display to none removes the element from the accessibility tree.

Code:

Display: none p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {display: none;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');}) the second kind: hidden elements

Visibility: hidden

Setting visibility to hidden makes the element invisible, but at this point the element is still in the accessibility tree (display: none when the element is moved out of the accessibility tree), and the click event registration is invalid.

Code:

Visibility: hidden p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {visibility: hidden;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');}) third: transparency

Opacity: 0

Opacity (opacity), with a value range of 0 (completely transparent) to 1 (completely opaque). Setting opacity to 0 makes the element completely transparent, when the element is not visible (because it is transparent), it is still in the accessibility tree, and the click event registration is valid.

Code:

Opacity: 0p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {opacity: 0;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');})

Transparent

Set the element's background-color, color, and border-color to transparent (transparent) so that the element is not visible (because it is transparent) and is still in the accessibility tree, registering click events is valid.

Code:

Transparent p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {color: transparent; background-color: transparent; border-color: transparent;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');})

Rgba (0d0d0j0p0p0p0p0p0)

Technically, transparent is a shorthand for rgba. The background-color, color, and border-color of the element are set to rgba (transparent), so that the element is not visible (because it is transparent) and is still in the accessibility tree. Registering click events is valid.

Code:

Rgba) p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {color: rgba; background-color: rgba; border-color: rgba;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');})

Rgba only needs a fourth parameter of 0 to achieve the effect of hiding elements.

Hsla (0pd0% pc0pl 0% pas 0)

Hsla uses the same element hiding mechanism as rgba, which is controlled by the fourth parameter Alpha. Set the background-color, color and border-color of the element to hsla (0pc0pc0p0p0p0p0), so that the element is not visible (because it is transparent) and is still in the accessibility tree, and the registration of click events is valid.

Code:

Hsla (0Jing 0% red; width 0% Jing 0) p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {color: hsla; background-color: hsla (0pc0% pc0); border-color: hsla (0pc0% p0p0);}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');})

Hsla is the same as rgba, only the fourth parameter is 0 to achieve the effect of hiding elements.

Filter: opacity (0%)

Filter (filter) opacity (0 ~ 100%) converts the transparency of the image, with values ranging from 0% (completely transparent) to 100% (completely opaque). Set the filter of the element to opacity (0%), when the element is not visible (because it is transparent), is still in the accessibility tree, and registers click events are valid.

Code:

Filter: opacity (0%) p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {filter: opacity;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');}) fourth: zoom

Transform: scale (0,0)

Setting transform to scale (0,0) zooms the element to 0 pixels on both the x-axis and y-axis, which displays and occupies a position, but because it has been scaled to 0%, the element and content occupy a pixel ratio of 0 to 0, so you can't see the element and its contents, and you can't click.

Code:

Transform: scale (0,0) p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {transform: scale (0jin0);}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt');})

Width: 0 position height: 0 position height: hidden

Set both width and height to 0 so that the pixel occupancy ratio of the element is 0: 0, but two situations occur:

When the display attribute of an element is inline, the content of the element will pull the width and height of the element apart.

When the display attribute of the element is block or inline-block, the width and height of the element is 0, but the content of the element is still displayed normally. Add overflow:hidden; to cut out the content of the element outside the element.

This method differs from transform: scale (0jue 0) in that transform: scale (0jue 0) zooms both the element and the content, while this method zooms the element to 0px, and then cuts out the content of the element outside the element.

Code:

Width: 0 position height: 0 background-color height: hidden p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {width:0; height:0; overflow: hidden; border-width: 0 user agent stylesheet * border-width: 2px in user agent stylesheet; * / padding: 0 padding in user agent stylesheet: 1px 6px; * /}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt')) }) the fifth: away from the display position on the screen

Leaving the on-screen display position can also make elements invisible, but there are too many css styles to achieve this effect, so here is only one example.

Code:

Detach from the screen display position p {background-color: red; width: 100px; height: 100px; line-height: 100px; text-align: center; margin-top: 24px;} button {background-color: black Color: white;} # bt {position: fixed; top:-100px; left:-100px;}

Button

Button

Let normal = document.getElementById ('normal'); let bt = document.getElementById (' bt'); normal.addEventListener ('click',function () {alert (' click normal');}) bt.addEventListener ('click',function () {alert (' click bt')) }) this is the end of the article on "how css3 controls element hiding". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.