Contoh Penggunaan CSS Display None

Daftar Isi

Pada artikel sebelumnya codepelajar sudha memberikan penjelasan mengenai aoa itu display none beserta cara pengubahan elemen menjadi display none, namun kali ini codepelajar akan memberikan contoh dari penggunaan display none.

Berikut ini adalah contoh penggunaan CSS `display: none`:

HTML:

```html

<div id="myElement">

  Ini adalah elemen yang ingin diubah tampilannya menjadi display none.

</div>

<button onclick="hideElement()">Sembunyikan Elemen</button>

```

CSS:

```css

#myElement {

  display: none;

}

```

JavaScript:

```javascript

function hideElement() {

  var element = document.getElementById('myElement');

  element.style.display = 'none';

}

```

Dalam contoh di atas, saat tombol "Sembunyikan Elemen" ditekan, fungsi `hideElement()` akan dipanggil dan mengubah tampilan elemen dengan ID "myElement" menjadi `display: none`. Sehingga, elemen tersebut tidak akan ditampilkan di halaman web.

Perlu diingat bahwa penggunaan CSS `display: none` akan menyembunyikan elemen secara total. Elemen yang memiliki `display: none` tidak akan memenuhi ruang di layar dan tidak akan terlihat sama sekali.