Ascunderea Elementelor CSS
Puteți ascunde elemente cu CSS folosind proprietatea display sau visibility.
CSS display: none;
Cu display: none, elementul este eliminat complet din fluxul documentului și nu ocupă spațiu.
Este adesea folosit împreună cu JavaScript pentru a afișa sau ascunde elemente fără a le șterge și recrea.
Ascunderea unui Element - Folosiți display:none sau visibility:hidden?
Puteți ascunde un element setând display: none. Elementul este ascuns, iar pagina este afișată ca și cum nu ar fi acolo.
Puteți folosi de asemenea visibility: hidden pentru a ascunde un element. Cu această proprietate elementul este ascuns, dar tot ocupă același spațiu ca înainte.
display: none
Titlul ascuns dispare și nu ocupă spațiu.
Prompt
O pagină HTML care ascunde un element cu display: none.
Într-un bloc
<style> intern, setați h1.hidden { display: none; }. Adăugați două titluri: unul normal și unul cu clasa „hidden”. Cel ascuns dispare și nu ocupă spațiu.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with display: none</h1>
<p>Notice that the hidden heading takes up no space.</p>
</body>
</html>
visibility: hidden
Titlul ascuns dispare, dar tot ocupă spațiul său.
Prompt
O pagină HTML care ascunde un element cu visibility: hidden.
Într-un bloc
<style> intern, setați h1.hidden { visibility: hidden; }. Adăugați două titluri: unul normal și unul cu clasa „hidden”. Cel ascuns dispare, dar tot ocupă spațiul său.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with visibility: hidden</h1>
<p>Notice that the hidden heading still takes up its space.</p>
</body>
</html>
Proprietăți CSS Display/Visibility
Un rezumat al proprietăților folosite aici:
display— stabilește cum este afișat un element;noneîl elimină din flux.visibility— stabilește dacă un element este vizibil;hiddenîl ascunde, dar îi păstrează spațiul.