Cara membuat DIV terlihat dan tidak terlihat dengan JavaScript

113

Bisakah kamu melakukan sesuatu seperti

function showDiv()
{
    [DIV].visible = true;
    //or something
}
javascript html Neuron
sumber
1
Mengapa tidak menggunakan Jquery saja? .hide ()?
coderama
Apakah saya akan menggunakannya untuk nama div, jadi jika div bernama test, saya akan melakukannya test.hide()?
8
@JackStone: Tidak, itu hanya jika Anda sudah menggunakan pustaka jQuery. Beberapa orang hanya suka mempromosikannya di setiap pertanyaan JavaScript. Bahkan jika Anda pernah, .hide()tidak mengatur visibilitas. Ini mengatur tampilan.
6
@ am not i am Anda jelas gagal untuk memahami bahwa jQuery benar-benar hebat dan melakukan semua hal. (Sumber gambar)
Pekka
8
Untuk sesuatu seperti ini, jawaban yang baik harus berisi solusi JS biasa dan solusi yang menunjukkan keuntungan menggunakan pustaka - dalam hal ini, tidak harus berurusan dengan blok inline vs saat menggunakan displayuntuk menampilkan elemen.
ThiefMaster

Jawaban:

139

jika [DIV] adalah elemen maka 

[DIV].style.visibility='visible'

ATAU

[DIV].style.visibility='hidden'
ron tornambe
sumber
16
visibilitymemiliki efek samping bahwa ruang yang ditempati oleh elemen tersebut tetap dicadangkan. Itu mungkin atau mungkin bukan yang diinginkan OP
Pekka
1
Di tempat di mana dikatakan [DIV], saya akan mengetikkan nama div saya kan?
20
Tidak, gunakan document.getElementById('id-of-the-div')sebagai ganti[DIV]
ThiefMaster
@JackStone: Itu tergantung pada apa yang Anda maksud dengan "nama" div Anda. Jika itu adalah variabel yang mereferensikan div, maka ya.
1
Jadi jika div saya adalah nama testdiv, apakah itu document.getElementById('testdiv').style.visibility = 'hidden';?
124

Anggaplah Anda tidak menggunakan pustaka seperti jQuery.

Jika Anda belum memiliki referensi ke elemen DOM, dapatkan satu menggunakan var elem = document.getElementById('id');

Kemudian Anda dapat menyetel properti CSS apa pun dari elemen itu. Untuk menampilkan / menyembunyikan, Anda dapat menggunakan dua properti: displaydan visibility, yang memiliki efek yang sedikit berbeda:

Menyesuaikan style.displayakan terlihat seolah-olah elemen tidak ada sama sekali ("dihapus").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

atau style.visibilitybenar-benar akan membuat div tetap ada, tetapi menjadi "semua kosong" atau "semua putih"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Jika Anda menggunakan jQuery, Anda dapat melakukannya dengan lebih mudah selama Anda ingin menyetel displaypropertinya:

$(elem).hide();
$(elem).show();

Ini secara otomatis akan menggunakan nilai yang sesuai display; Anda tidak perlu peduli dengan jenis elemen (sebaris atau blok). Selain itu, elemtidak hanya dapat menjadi elemen DOM tetapi juga pemilih seperti #idatau .classatau apa pun yang merupakan CSS3 yang valid (dan banyak lagi!).

ThiefMaster
sumber
Saya lebih suka jawaban Anda, tetapi saya rasa ada sedikit koreksi yang harus Anda gunakan untuk elem.style.display = 'none';
Saumil
Terkadang dapat diterima untuk menetapkan string kosong untuk menampilkan elemen .
Basilevs
29

Anda dapat menggunakan visibilityatau displaytetapi Anda harus menerapkan perubahan pada div.styleobjek dan bukan divobjek itu sendiri.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
zellio
sumber
div.style.visibility = falsetidak bekerja untuk saya di Chrome. Dan truebagian tersebut tampaknya bekerja lebih karena kecelakaan karena mengganggu properti (Namun bukan suara negatif saya)
Pekka
Juga displaybukan visibilityproperti boolean. Selain itu, nonedan blockperlu dikutip karena mereka adalah string ..
ThiefMaster
nilai yang salah untuk label. Itu bekerja sekarang dan tidak, saya tidak akan mengotak-atik ini, itu terlalu sederhana.
zellio
4

Anda dapat menggunakan fungsi DOM: setAttribute dan removeAttribute. Di tautan berikut, Anda memiliki contoh cara menggunakannya.

setAttribute dan fungsi removeAttribute

Tampilan cepat:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
jarh1992
sumber
2
Bisakah Anda meningkatkan jawaban Anda? Dengan contoh dan penjelasannya.
Gaël Barbin
1

Anda dapat menggunakan opacityyang mirip dengan visibility tetapi memungkinkan untuk memperlancar transisi dan mengontrol parameter lain seperti ketinggian (untuk kesederhanaan cuplikan saya meletakkan logika js di html secara langsung - jangan lakukan itu dalam kode produksi)

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber
0

Gunakan atribut 'tersembunyi' dari elemen DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}
Andrey Hohutkin
sumber
0

Jadikan Tak Terlihat menggunakan CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Jadikan Terlihat menggunakan Javascript

document.getElementById('div_id').style.visibility = 'visible';
Dilip Kumar Choudhary
sumber