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('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Şimdi Test Edin Çı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:
