วิธีซ่อน/แสดง HTML Elements ใน JavaScript

ใช้ CSS style ซ่อน หรือ แสดง HTML elements ใน JavaScript CSS มี properties block และ none

การซ่อน Element

ตัวอย่าง

กดปุ่ม "Hideme" ข้อความใน p tag หายไป

<html> <body> 
    <p id="hide">Using JavaScript to hide HTML elements.</p> 
    <input type="button" onclick="document.getElementById('hide').style.display='none'" value="Hideme"> 
</body> </html>

หลังรันโค้ดแสดงดังภาพ

กด "Hideme" ข้อความหาย เหลือแค่ปุ่ม

ผลลัพธ์

การแสดง Element

ตัวอย่าง

ข้อความใน p tag ซ่อนอยู่ก่อน (display:none) กด "Showme" ข้อความแสดง

<html> <body> 
    <p id="show" style="display:none">JavaScript can show hidden HTML elements</p> 
    <input type="button" onclick="document.getElementById('show').style.display='block'" value="ShowMe"> 
</body> </html>

หลังรันแสดงดังภาพ

กดปุ่ม ข้อความแสดง

ผลลัพธ์