JavaScript ซ่อน แสดง div ด้วย style.display

สอนเขียนภาษา JavaScript ซ่อน แสดง div ด้วยคำสั่ง display ถ้ากำหนดค่าเป็น none จะซ่อน และถ้ากำหนดค่าเป็น block จะแสดง โดยตัวอย่างจะสร้างฟังก์ชันสำหรับรับการกดเลือกซ่อน หรือแสดง div จากผู้ใช้งาน โดยอ้างอิง div ผ่าน attribute id สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ซ่อน แสดง div

<div style="width:50px; height:50px; background-color:blue;" id="box"></div>
<br/>
<a href="javascript:showOrHideDiv('none');">ซ่อน div</a> | <a href="javascript:showOrHideDiv('block');">แสดง div</a>

<script>
    function showOrHideDiv( display ) {
        var e = document.getElementById("box");
        box.style.display = display;
    }
</script>

1. เมื่อผู้ใช้งานกดลิงก์ ซ่อน div จะเรียกใช้ฟังก์ชัน showOrHideDiv และส่งค่า none แต่ถ้าผู้ใช้งานกดลิงก์ แสดง div จะส่งค่าเป็น block เข้าไปในฟังก์ชัน showOrHideDiv

2. ฟังก์ชัน showOrHideDiv จะอ้างอิงถึง div ผ่าน id = box และใช้คำสั่ง style.display สำหรับกำหนดว่าจะซ่อน หรือแสดง ถ้าค่าที่ส่งมาเป็น none คือ ซ่อน กลับกันถ้าค่าที่ส่งมาเป็น block คือแสดง