CSS: Display vs Visibility

BY IN HTML Comments Off on CSS: Display vs Visibility

Style display dan visibility ini biasanya digunakan untuk menampilkan atau menyembunyikan object di dalam halaman HTML.

Untuk Display mempunyai 2 property yang utama yaitu:
– None: Tidak kelihatan
– Block: kelihatan

Sedangkan untuk Visibility juga mempunyai 2 property yang dapat diset nilainya yaitu:
– Hidden: Tidak kelihatan
– Visible: kelihatan

Perbedaan diantara keduanya mungkin tidak begitu menyolok, namun hanya masalah space saja, dimana jika kita menambahkan space pada bagian yang akan dihilangkan, penggunaan style visibility:hidden akan tetap memunculkan space tersebut.

Berikut contoh-contohnya:
<img style=”display: block;” src=”gambar.jpg” width=”100″ height=”100″ />
<img style=”display: none;” src=”gambar.jpg” width=”100″ height=”100″ />

Terus misalnya kita akan membuat sebuah trigger yang akan memunculkan dan menyembunyikan gambar ataupun object lainnya. Dapat kita tuliskan sebagai berikut:

<script>

function changeme(id, action) {
if (action==”hide”) {
document.getElementById(id).style.display = “none”;
} else {
document.getElementById(id).style.display = “block”;
}
}

</script>

<img id=”myIMG” style=”display: none;” src=”the_source_img_path” width=”100″ height=”100″ />

<span onclick=”changeme(‘myIMG’, ‘hide’);” style=”color: blue; text-decoration: underline; cursor: pointer;”>Hide the image</span>

<span onclick=”changeme(‘myIMG’, ‘show’);” style=”color: blue; text-decoration: underline; cursor: pointer;”>Show the image</span>




Comments are closed.