JavaScript ile DIV nasıl görünür ve görünmez yapılır?

113

Gibi bir şey yapabilir misin

function showDiv()
{
    [DIV].visible = true;
    //or something
}

javascript html

— Nöron
kaynak

1

Neden sadece Jquery kullanmıyorsunuz? .saklamak() ?

— coderama

Bunu div adı için kullanır mıydım, yani div'in adı test olsaydı, kullanır mıydım test.hide()?

8

@JackStone: Hayır, bu sadece jQuery kitaplığını zaten kullanıyorsanız. Bazı insanlar bunu her JavaScript sorusunda tanıtmayı sever. Öyle olsanız bile, .hide()görünürlüğü ayarlamaz. Görüntüyü ayarlar.

6

@am değil, jQuery'nin gerçekten harika olduğunu ve her şeyi yaptığını anlamada açıkça başarısız oldunuz . (Resim kaynağı)

— Pekka

8

Bunun gibi bir şey için iyi bir cevap hem düz bir JS çözümü hem de kitaplık kullanmanın avantajını gösteren bir çözüm içermelidir - bu durumda, bir öğeyi göstermek için kullanırken satır içi vs blok ile uğraşmak zorunda kalmazsınız display.

— ThiefMaster

139

[DIV] bir öğe ise o zaman

[DIV].style.visibility='visible'

VEYA

[DIV].style.visibility='hidden'

— Ron tornambe
kaynak

16

visibilityelementin kapladığı alanın ayrılmış kalması gibi yan etkiye sahiptir. OP'nin istediği şey bu olabilir de olmayabilir de

— Pekka

1

[DIV] yazan yere, div adımı yazardım değil mi?

20

Hayır, document.getElementById('id-of-the-div')yerine kullanın[DIV]

— ThiefMaster

@JackStone: Bu, div'inizin "adı" ile ne demek istediğinize bağlıdır. Div'e başvuran bir değişkense, evet.

1

Yani benim div ismim testdivolsaydı, olurdu document.getElementById('testdiv').style.visibility = 'hidden';?

124

JQuery gibi bir kitaplık kullanmadığınızı varsayalım.

DOM öğesine henüz bir referansınız yoksa, şunu kullanarak alın var elem = document.getElementById('id');

Daha sonra bu öğenin herhangi bir CSS özelliğini ayarlayabilirsiniz. Göstermek / gizlemek için iki özellik kullanabilirsiniz: displayve visibilitybiraz farklı etkileri olan:

Ayarlama style.display, öğe hiç yokmuş gibi görünecektir ("kaldırılmış").

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)

veya style.visibilitygerçekte div'in hala orada olmasını sağlar, ancak "tümü boş" veya "tamamen beyaz" olur

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

JQuery kullanıyorsanız, displayözelliği ayarlamak istediğiniz sürece bunu daha da kolay yapabilirsiniz :

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

Otomatik olarak uygun displaydeğeri kullanacaktır ; öğe türünü (satır içi veya blok) önemsemeniz gerekmez. Ek olarak, elemyalnızca bir DOM öğesi değil, aynı zamanda #idveya .classveya geçerli CSS3 (ve daha fazlası!) Gibi herhangi bir şey gibi bir seçici de olabilir .

— ThiefMaster
kaynak

Cevabınızı tercih ederim ama sanırım elem.style.display = 'none' kullanmanız gereken küçük bir düzeltme var;

— Saumil

Bazen bir öğeyi göstermek için boş bir dizge atamak kabul edilebilir .

— Basilevs

29

Sen kullanabilirsiniz visibilityveya displayancak değişiklikleri uygulamak zorunda div.stylenesne değil, divnesne kendisi.

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
kaynak

div.style.visibility = falsebenim için Chrome'da çalışmıyor. trueGörünüşe göre bu kısım tesadüfen daha çok çalışıyor çünkü mülkü bozuyor (Olumsuz oyum değil)

— Pekka

Boole özellikleri ne displayde değildir visibility. Bunun yanı sıra, noneve blockgerek bunlar .. dizeleri beri teklif edilecek

— ThiefMaster

etiketler için yanlış değerler. Bunlar şimdi işe yarıyor ve hayır, bunu kandırmayacağım, bu çok basit.

— zellio

5

DOM işlevlerini kullanabilirsiniz: setAttribute ve removeAttribute. Aşağıdaki bağlantıda bunları nasıl kullanacağınıza dair bir örnek var.

setAttribute ve removeAttribute işlevleri

Hızlı bir görünüm:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

— jarh1992
kaynak

2

Cevabınızı geliştirebilir misiniz? Örnek ve açıklamalarla.

— Gaël Barbin

1

Sen kullanabilirsiniz opacitybenzer olan visibility fakat geçişi kolaylaştırmak ve yükseklik gibi diğer parametreleri kontrol etmesine izin (pasajı basitlik için doğrudan html içinde js mantığı koymak - Prodüksiyon kodunda bunu yapmayın)

Kod parçacığını göster

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

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

0

DOM öğesinin "gizli" özelliğini kullanın:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

— Andrey Hohutkin
kaynak

0

CSS kullanarak Görünmez yapın

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

Javascript Kullanarak Görünür Yapın

document.getElementById('div_id').style.visibility = 'visible';

— Dilip Kumar Choudhary
kaynak