Există un opus la display:none? (Programare, Css)

Mohammad Areeb Siddiqui a intrebat.

Opusul lui visibility: hidden este visibility: visible. În mod similar, există un opus pentru display: none?

Mulți oameni devin confuzi când își dau seama cum să arate un element atunci când acesta are display: none, deoarece nu este la fel de clar ca și cum ar fi să folosești opțiunea visibility proprietate.

Aș putea să folosesc pur și simplu visibility: hidden în loc de display: none, dar nu oferă același efect, așa că nu voi merge pe această variantă.

Comentarii

  • De ce să te obosești să pui o întrebare dacă răspunsul tău este să copiezi/lipesti un tabel din w3schools.com/cssref/pr_class_display.asp ? –  > Por Bill Șopârla.
  • @mathheadinclouds nu cred că răspunsul lui Ilya oferă un opus la display none. Cu siguranță ne spune un truc, dar întrebarea este despre a avea o analogie ca visible -> hidden și ? -> none –  > Por Mohammad Areeb Siddiqui.
  • ei bine, ai fi putut întreba „cum anulezi efectul display:none” – atunci, metoda lui Ilya ar fi fost un răspuns corect. În esență, ați cerut un display: ?ceva?, astfel încât acel ?ceva? să anuleze efectul display: none (pe care eu l-aș numi opus). Sigur, acel ?ceva? nu există. Deci nu există opusul. Corect, nu are rost să discutăm acest lucru, nu este în discuție. Dar poți anula efectul, dacă folosești metoda lui Ilya. Deci, într-un sens superior, este un opus. Doar că nu există un opus „dintr-un singur cuvânt”. –  > Por mathheadinclouds.
  • @mathheadinclouds asta ne spune răspunsul lui Paul. Nu există un opus, toate sunt opuse. Nu am cerut o modalitate de a anula efectul, am cerut o valoare pe care regula de afișare să o poată ține așa cum face regula de vizibilitate. –  > Por Mohammad Areeb Siddiqui.
15 răspunsuri
Paul D. Waite

display: none nu are un opus literal ca visibility:hidden are.

The visibility proprietate decide dacă un element este vizibil sau nu. Prin urmare, aceasta are două stări (visible și hidden), care sunt opuse una față de cealaltă.

Adresa display decide însă ce reguli de prezentare va urma un element. Există mai multe tipuri diferite de reguli pentru modul în care elementele se vor aranja în CSS, astfel încât există mai multe valori diferite (block, inline, inline-block etc. consultați documentația pentru aceste valori aici ).

display:none elimină în întregime un element din aspectul paginii, ca și cum nu ar fi acolo.

Toate celelalte valori pentru display fac ca elementul să facă parte din pagină, deci, într-un sens, ele sunt toate opusul lui display:none.

Dar nu există o valoare care să fie direct opusă lui display:none – la fel cum nu există un stil de păr care să fie opusul lui „chel”.

Comentarii

  • Am observat că ai menționat display: initial în autorăspunsul eliminat – pentru browserele care implementează CSS2.1 este sinonim cu display: inline. Nu se resetează display la valoarea implicită a browserului pentru un anumit element – nu asta înseamnă „valoare inițială”. –  > Por BoltClock.
RockPaperLz- Masca sau sicriu

Un adevărat opus la display: none nu există (încă).

Dar display: unset este foarte aproape și funcționează în majoritatea cazurilor.

De la MDN (Mozilla Developer Network):

Cuvântul cheie CSS unset este o combinație între cuvintele cheie initial și inherit. Ca și celelalte două cuvinte cheie CSS, poate fi aplicat la orice proprietate CSS, inclusiv la prescurtarea CSS all. Acest cuvânt cheie resetează proprietatea la valoarea sa moștenită, dacă moștenește de la părintele său, sau la valoarea sa inițială, în caz contrar. Cu alte cuvinte, se comportă ca și cuvântul cheie inherit în primul caz și ca și cuvântul cheie initial în al doilea caz.

(sursă: https://developer.mozilla.org/docs/Web/CSS/unset)

Rețineți, de asemenea, că display: revert este în curs de dezvoltare. A se vedea MDN pentru detalii.

Comentarii

  • Ce se întâmplă cu display: initial? –  > Por Flimm.
  • @Flimm Nu, display: initial este echivalent cu revenirea la display: inline ceea ce nu doriți dacă ați avut anterior un element cu default display: block. –  > Por trusktr.
Ilya Streltsyn

Atunci când se schimbă valoarea elementului display în Javascript, în multe cazuri, o opțiune potrivită pentru a „anula” rezultatul operațiunii element.style.display = "none" este element.style.display = "". Aceasta elimină display din elementul style revenind la valoarea reală a lui display la valoarea stabilită în foaia de stil pentru document (la valoarea implicită a browserului dacă nu este redefinită în altă parte). Dar o abordare mai fiabilă este aceea de a avea o clasă în CSS de tipul

.invisible { display: none; }

și adăugarea/eliminarea numelui acestei clase în/din element.className.

Comentarii

  • Dacă doriți să suprascrieți .element { display: none } (definită în CSS lib, de exemplu) cu .element { display: '' !important } nu va funcționa. Trebuie să utilizați .element { display: unset !important } –  > Por tanguy_k.
  • Am spus despre „anularea” display:none numai în JavaScript. Desigur, șirul gol nu va funcționa în CSS, deoarece este o valoare invalidă. Hovewer, display: unset ceea ce sugerați nu va restabili, de exemplu, valoarea implicită display:block pentru un <div> sau valoarea implicită display:table-row pentru a <tr>, ea transformă efectiv totul în display:inline (la fel ca display:initial). Pentru a restabili valoarea implicită a browserului pentru elementul respectiv, există o opțiune display:revert, dar nu este bine susținută (caniuse.com/#feat=css-revert-value). –  > Por Ilya Streltsyn.
indera

puteți utiliza

display: normal;

Funcționează în mod normal…. Este o mică hacking în css 😉

Comentarii

  • De ce este acest lucru fiind downvoted? Este o modalitate proastă de a face acest lucru sau? Funcționează bine pentru tablerows, dar ar trebui să folosesc altceva? –  > Por Benjamin Karlog.
  • Valoarea „normal” nu este o valoare validă pentru display așa că este ignorată și funcționează efectiv ca și cum ar fi element.style.display = '' (a se vedea răspunsul meu de mai sus). –  > Por Ilya Streltsyn.
  • 29

  • deci, cu alte cuvinte, ați fi putut folosi display: chunk norris; pentru același efect, cu un pic mai multă forță. –  > Por Kevin B.
  • Dacă doriți să suprascrieți .element { display: none } (definit în CSS lib, de exemplu) cu .element { display: normal !important } nu va funcționa. Trebuie să utilizați .element { display: unset !important } –  > Por tanguy_k.
Pradeep Behera

Eu folosescdisplay:block;Funcționează pentru mine

Comentarii

  • Asta este util doar pentru elementele pe care doriți să le afișați ca block, nu este ceea ce doriți în general pentru un element inline element precum <span> de exemplu. –  > Por Flimm.
user3589536

După cum explică Paul, nu există un opus literal al lui display: none în HTML, deoarece fiecare element are un afișaj implicit diferit și puteți, de asemenea, să schimbați afișajul cu o clasă sau un stil inline etc.

Cu toate acestea, dacă folosiți ceva de genul jQuery, funcțiile lor de afișare și ascundere se comportă ca și cum ar exista un opus al lui display none. Atunci când ascundeți și apoi afișați din nou un element, acesta va fi afișat exact în același mod în care a fost afișat înainte de a fi ascuns. Acestea fac acest lucru prin stocarea vechii valori a proprietății display la ascunderea elementului, astfel încât, atunci când îl afișați din nou, acesta se va afișa în același mod în care s-a afișat înainte de a-l ascunde.https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Acest lucru înseamnă că, dacă setați un div, de exemplu, la afișare inline sau inline-block, îl ascundeți și apoi îl afișați din nou, acesta va fi afișat din nou ca afișare inline sau inline-block la fel ca înainte.

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

script:

  $('a').click(function(){
        $('div').toggle();
    });

Observați că proprietatea de afișare a div-ului va rămâne constantă chiar și după ce a fost ascuns (display:none) și afișat din nou.

Comentarii

  • „display:table-cell” era cea de care aveam nevoie. Nu a fost menționat pe nici un alt răspuns. –  > Por bendecko.
TonyP

În cazul unei foi de stil prietenoase cu imprimanta, eu folosesc următoarele:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Am folosit acest lucru atunci când am avut nevoie să tipăresc un formular care conținea valori, iar câmpurile de intrare erau greu de tipărit. Așa că am adăugat valorile înfășurate într-o etichetă span.print_only (div.print_only a fost folosită în altă parte) și apoi am aplicat clasa .no_print câmpurilor de intrare. Astfel, pe ecran se vedeau câmpurile de intrare, iar la imprimare, doar valorile. Dacă doriți să fiți mai pretențioși, ați putea folosi JS pentru a actualiza valorile din tag-urile span atunci când câmpurile sunt actualizate, dar acest lucru nu a fost necesar în cazul meu. Poate că nu este cea mai elegantă soluție, dar a funcționat pentru mine!

Adeetya Kulkarni

Puteți folosi afișarea: block

Exemplu :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Andrew Sainsbury

M-am confruntat cu această provocare atunci când am construit o aplicație în care doream ca un tabel să fie ascuns pentru anumiți utilizatori, dar nu și pentru alții.

Inițial l-am configurat ca display:none, dar apoi display:inline-block pentru acei utilizatori pe care doream să îl vadă, dar am întâmpinat problemele de formatare la care te-ai putea aștepta (coloane care se consolidează sau în general dezordonate).

Modul în care am rezolvat problema a fost să afișez mai întâi tabelul și apoi să fac „display:none” pentru acei utilizatori pe care nu voiam să îl văd. În acest fel, se formata în mod normal, dar apoi dispărea la nevoie.

O soluție puțin laterală, dar ar putea ajuta pe cineva!

NEELAMADHAB

opusul lui „none” este „flex” în timp ce lucrați cu react native.

Ruben Reti

display:unset îl setează înapoi la o anumită setare inițială, nu la valorile „display” anterioare

tocmai am copiat din nou valoarea de afișare anterioară (în cazul meu display: flex;)după display non), și a revenit cu succes la display:none

(am folosit display:none pentru a ascunde elementele pentru mobile și ecrane mici)

Comentarii

  • Bună ziua și bine ați venit pe StackOverflow. Vă rugăm să păstrați secțiunea de răspunsuri doar pentru răspunsuri. Dacă aveți o întrebare despre un răspuns care a fost deja dat, ar trebui să întrebați în comentariile acelui răspuns sau să puneți o întrebare nouă dacă nu a mai fost pusă până acum. Mai multe despre liniile directoare privind răspunsurile aici: stackoverflow.com/help/how-to-answer –  > Por Thanh-Quy Nguyen.
Hardik Sondagar

visibility:hidden va ascunde elementul, dar elementul este al lor cu DOM. Iar în cazul display:none va elimina elementul din DOM.

Deci, aveți opțiunea ca elementul să fie ascuns sau nu. Dar odată ce îl ștergeți (mă refer la display none), nu se șterge valoarea opusă. display are mai multe valori, cum ar fi display:block, display:inline, display:inline-block și multe altele. puteți verifica de la W3C.

Comentarii

  • De ce nu există și alte valori pentru display? –  > Por Paul D. Waite.
  • Ar trebui să fie aceasta o listă completă? Nu este. –  > Por Ry-.
Yasir

Cel mai bun răspuns pentru display: none este

display:inline

sau

display:normal

Comentarii

TimNguyenBSM

Cel mai bun „opus” ar fi să o readuceți la valoarea implicită care este:

display: inline

Comentarii

  • Vreau doar să clarific faptul că proprietatea display nu are o valoare implicită, elementul html are însă. Valoarea implicită a unui DIV ar fi display:block, un SPAN ar avea ca valoare implicită display:inline. Dar proprietatea display de sine stătătoare nu are o valoare implicită. –  > Por kevinius.
Bel

Puteți utiliza această opțiune display:block; și, de asemenea, să adăugați overflow:hidden;

Comentarii

  • Vă rugăm să citiți răspunsurile existente înainte de a contribui cu propriile răspunsuri. Există un răspuns bun, bine votat, și acceptat răspuns din mai anul trecut și există, de asemenea, un răspuns cu un total negativ de voturi care este mai mult sau mai puțin identic cu al dvs. –  > Por Quentin.
  • Am văzut răspunsul. Display:Unset nu funcționează la fel de bine ca un Display:block. Părerea mea 🙂 @Quentin –  > Por Bel.
  • Și display: block nu funcționează bine pe un <span> sau un <td> … și un răspuns anterior a menționat deja display: block. –  > Por Quentin.
  • Ați editat răspunsul pentru a menționa overflow: hidden. De ce? Ce rost are să adaugi asta? Nu are nimic de-a face cu anularea unui display: none. –  > Por Quentin.

Tags: