Apakah ada kebalikan dari tampilan: tidak ada?

Kebalikan dari visibility: hiddenadalah visibility: visible. Demikian pula, adakah yang sebaliknyadisplay: none ?

Banyak orang menjadi bingung mencari tahu bagaimana menunjukkan elemen ketika itu memiliki display: none , karena itu tidak sejelas menggunakan visibilityproperti.

Saya hanya bisa menggunakan visibility: hiddenbukan display: none, tetapi tidak memberikan efek yang sama, jadi saya tidak akan menggunakannya.

display: nonetidak memiliki lawan literal seperti visibility:hiddenhalnya.

The visibilityproperti memutuskan apakah elemen terlihat atau tidak. Karena itu ia memiliki dua negara ( visibledan hidden), yang berseberangan satu sama lain.

The displayproperti, bagaimanapun, memutuskan apa aturan tata letak elemen akan mengikuti. Ada beberapa jenis aturan untuk bagaimana elemen akan meletakkan diri dalam CSS, sehingga ada beberapa nilai yang berbeda ( block, inline, inline-blockdll - lihat dokumentasi untuk nilai-nilai ini di sini ).

display:none menghapus elemen dari tata letak halaman sepenuhnya, seolah-olah tidak ada di sana.

Semua nilai lain untuk displaymenyebabkan elemen menjadi bagian dari halaman, jadi dalam arti semuanya berlawanan display:none.

Tetapi tidak ada satu nilai pun yang menjadi kebalikannya display:none- sama seperti tidak ada satu gaya rambut yang bertolak belakang dengan "botak".

Kebalikan dari display: none sana belum (belum).

Tapi display: unset sangat dekat dan berfungsi dalam banyak kasus.

Dari MDN (Jaringan Pengembang Mozilla):

Kata kunci CSS yang tidak disetel adalah kombinasi dari kata kunci awal dan inherit. Seperti dua kata kunci lainnya yang menggunakan CSS, kata kunci ini dapat diterapkan ke properti CSS apa pun, termasuk steno semua CSS. Kata kunci ini me-reset properti ke nilai yang diwarisi jika itu mewarisi dari induknya atau ke nilai awal jika tidak. Dengan kata lain, ini berperilaku seperti kata kunci inherit dalam kasus pertama dan seperti kata kunci awal dalam kasus kedua.

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

Perhatikan juga bahwa display: revertsaat ini sedang dikembangkan. Lihat MDN untuk detailnya.

Saat mengubah elemen displaydalam Javascript, dalam banyak kasus pilihan yang cocok untuk 'membatalkan' hasilnya element.style.display = "none"adalah element.style.display = "". Ini menghapus displaydeklarasi dari styleatribut, mengembalikan nilai aktual displayproperti ke nilai yang ditetapkan dalam stylesheet untuk dokumen (ke default browser jika tidak didefinisikan ulang di tempat lain). Tetapi pendekatan yang lebih dapat diandalkan adalah memiliki kelas seperti CSS

.invisible { display: none; }

dan menambahkan / menghapus nama kelas ini ke / dari element.className.

kamu bisa memakai

display: normal;

Ini berfungsi seperti biasa .... Ini peretasan kecil di css;)

Saya menggunakan display:block; ini bekerja untuk saya

Seperti yang dijelaskan oleh Paul, tidak ada kebalikan dari tampilan: tidak ada dalam HTML karena setiap elemen memiliki tampilan default yang berbeda dan Anda juga dapat mengubah tampilan dengan gaya kelas atau inline dll.

Namun jika Anda menggunakan sesuatu seperti jQuery, fungsi show dan hide mereka berperilaku seolah-olah tidak ada tampilan yang berlawanan. Saat Anda bersembunyi, dan kemudian menampilkan elemen lagi, elemen itu akan ditampilkan dengan cara yang persis sama seperti sebelum disembunyikan. Mereka melakukan ini dengan menyimpan nilai lama dari properti tampilan pada persembunyian elemen sehingga ketika Anda menunjukkannya lagi itu akan ditampilkan dengan cara yang sama seperti sebelum Anda menyembunyikannya. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Ini berarti bahwa jika Anda menetapkan div misalnya untuk menampilkan inline, atau inline-block dan Anda menyembunyikannya dan kemudian memperlihatkannya lagi, itu akan sekali lagi ditampilkan sebagai display inline atau inline-block sama seperti sebelumnya

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

naskah:

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

Perhatikan bahwa properti tampilan div akan tetap konstan bahkan setelah itu disembunyikan (tampilan: tidak ada) dan ditampilkan lagi.

Dalam hal stylesheet ramah printer, saya menggunakan yang berikut ini:

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

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

Saya menggunakan ini ketika saya perlu mencetak formulir yang berisi nilai-nilai dan bidang input sulit untuk dicetak. Jadi saya menambahkan nilai-nilai yang terbungkus tag span.print_only (div.print_only digunakan di tempat lain) dan kemudian menerapkan kelas .no_print ke kolom input. Jadi pada layar Anda akan melihat kolom input dan ketika dicetak, hanya nilainya. Jika Anda ingin menjadi mewah, Anda bisa menggunakan JS untuk memperbarui nilai dalam tag rentang ketika bidang diperbarui tetapi itu tidak perlu dalam kasus saya. Mungkin bukan solusi yang paling elegan tetapi berhasil untuk saya!

Anda dapat menggunakan tampilan: blok

Contoh:

<!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> 

Saya mengalami tantangan ini ketika membangun aplikasi di mana saya ingin meja disembunyikan untuk pengguna tertentu tetapi tidak untuk orang lain.

Awalnya saya mengaturnya sebagai tampilan: tidak ada tetapi kemudian menampilkan: inline-block untuk para pengguna yang ingin saya lihat tetapi saya mengalami masalah pemformatan yang mungkin Anda harapkan (kolom konsolidasi atau umumnya berantakan).

Cara saya mengatasinya adalah dengan menunjukkan tabel terlebih dahulu dan kemudian melakukan "display: none" untuk para pengguna yang saya tidak ingin melihatnya. Dengan cara ini, itu diformat secara normal tetapi kemudian menghilang sesuai kebutuhan.

Sedikit solusi lateral tetapi mungkin bisa membantu seseorang!

kebalikan dari 'none' adalah 'flex' saat bekerja dengan reaksi asli.

visibilitas: tersembunyi akan menyembunyikan elemen tetapi elemen adalah miliknya dengan DOM. Dan dalam hal tampilan: tidak ada yang akan menghapus elemen dari DOM.

Jadi, Anda memiliki opsi untuk elemen untuk menyembunyikan atau menyembunyikan. Tapi begitu Anda menghapusnya (maksud saya display tidak ada) itu tidak memiliki nilai yang berlawanan. display memiliki beberapa nilai seperti display: block, display: inline, display: inline-block dan banyak lainnya. Anda dapat memeriksanya dari W3C.

Jawaban terbaik display: noneadalah

display:inline

atau

display:normal

Anda dapat menggunakan ini display:block;dan juga menambahkanoverflow:hidden;

"Lawan" terbaik adalah mengembalikannya ke nilai default yaitu:

display: inline