Properti style.display digunakan untuk menetapkan jika atau bagaimana suatu elemen ditampilkan.
Sintaks:
obj.style.display = value;
Nilainya:
inline(default)
Suatu elemen ditampilkan dengan tidak memperoleh tambahan line break sebelum dan setelahnya.block
Suatu elemen ditampilkan dengan tambahan line break sebelum dan setelahnya.list-item
Suatu elemen ditampilkan dengan tambahan line break sebelum dan setelahnya, tetapi dengan tambahan list item marker.none
Ketika anda ingin menyembunyikan suatu elemen, silahkan set DISPLAY ke nilai none.inherit
Contoh:
<HTML>
<HEAD>
<TITLE>style.display</TITLE>
<STYLE TYPE="text/css">
#mydiv
{
border: solid black 1px;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="mydiv">
<P>Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...</P>
<P>Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...</P>
<P>Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...Lorem ipsum...</P>
</DIV>
<BUTTON TYPE="button" ID="mybutton_1" ONCLICK="document.getElementById('mydiv').style.display = 'none'; document.getElementById('mybutton_2').style.display = 'block'; this.style.display = 'none';">Sembunyikan teks di atas</BUTTON>
<BUTTON TYPE="button" STYLE="display: none;" ID="mybutton_2" ONCLICK="document.getElementById('mydiv').style.display = 'block'; document.getElementById('mybutton_1').style.display = 'block'; this.style.display = 'none';">Munculkan kembali teks di atas</BUTTON>
</BODY>
</HTML>
