CSS วิธีซ่อน div และแสดง div ด้วยคำสั่ง display

สอนเขียนโค้ดภาษา CSS ซ่อน div และแสดง div โดยแนะนำให้ใช้คำสั่ง display กรณีต้องการซ่อนให้กำหนดค่าเป็น none และกรณีต้องการแสดงให้กำหนดค่าเป็น block สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS วิธีซ่อน div และแสดง div ด้วยคำสั่ง display

<style>
    .none {
        display: none;
    }
    .block {
        display: block;
    }
</style>

<div style="width:50px; height:50px; background-color:green" class="none"></div>
<div style="width:50px; height:50px; background-color:blue" class="block"></div>

โค้ดด้านบนมี div 2 อัน โดย div อันแรกถูกกำหนด class เป็น none ซึ่ง class none มีคำสั่ง display: none ทำให้ div อันนี้ถูกซ่อน ส่วน div อันที่สองกำหนด class เป็น block ซึ่ง class block มีคำสั่ง display: block ทำให้ div อันนี้ถูกแสดง