Devdit
 

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

2.8K

สอนเขียนโค้ดภาษา 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 อันนี้ถูกแสดง

เขียน 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ