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>
[ add comment ] | permalink |
( 0 / 0 )
Calendar
