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

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

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Luaskan cuplikan

— 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