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>