JavaScript'te öğeleri aşağıdakileri kullanarak gizleyebiliriz: stil.görüntü veya kullanarak stil.görünürlük . görünürlük JavaScript'teki özellik aynı zamanda bir öğeyi gizlemek için de kullanılır. Aradaki fark stil.görüntü Ve stil.görünürlük kullanırken görünürlük: gizli, etiket görünmez ancak alan ayrılmıştır. Kullanma görüntü yok, etiketi de görünmüyor ancak sayfada ayrılmış alan yok.

HTML'de şunu kullanabiliriz: gizlenmiş Belirtilen öğeyi gizlemek için öznitelik. Ne zaman gizlenmiş HTML'deki öznitelik true olarak ayarlanır, öğe gizlenir veya değer YANLIŞ, eleman görülüyor.

Sözdizimi

Bir öğeyi kullanarak gizlemek için genel sözdizimi stil.gizli Ve stil.görünürlük aşağıdaki şekilde verilmektedir.

Kullanma stil.gizli

 document.getElementById('element').style.display = 'none'; 

Kullanma stil.görünürlük

 document.getElementById('element').style.visibility = 'none'; 

Şimdi elemanların gizlenmesini anlamak için bazı örnekler görelim. javascript .

Örnek 1

Bu örnekte, JavaScript'i kullanarak öğelerin nasıl kaldırılacağını göreceğiz. stil.görüntü mülk. Burada bir tane var div öğesi ve verilen öğeye tıklandığında gizlenen bir paragraf öğesi HTML düğmesi . seçeneğine tıklamamız gerekiyor 'Beni tıkla!' Efekti görmek için düğmesine basın.

 style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 

Çıktı

Çıktıda şunu görebiliriz: div eleman (üzerine uyguladığımız stil.görünürlük property) saklanıyor ancak yine de alanı ayırıyor. Ancak (başvurduğumuz) başlık stil.görüntü property) saklanıyor ve herhangi bir alan ayırmıyor.

Düğmeye tıkladıktan sonra sonuç şöyle olacaktır: