การซ่อน/แสดง element

• ในตอนนี้ เราจะมารู้จักกับ attribute ที่ชื่อว่า hidden ครับ

• ถ้าเราใส่ hidden เข้าไปใน element ใดๆ จะทำให้ element นั้นถูกซ่อนไว้ และจะไม่แสดงผลออกมาบนหน้าเว็บ

  <p>Text 1</p>
  <p hidden>Text 2</p>
  <p>Text 3</p>

  index.html

  ในตัวอย่างข้างบน จะเห็นว่า คำว่า Text 2 ไม่ปรากฏบนหน้าเว็บ เพราะถูกซ่อนไว้

การแสดง/ซ่อน element ด้วย JavaScript

• ถ้าเราต้องการแสดง/ซ่อน element ด้วย JavaScript เริ่มจากการสร้างตัวแปรให้อ้างอิงไปยัง element ที่เราต้องการก่อนครับ

  <p id="text">Text</p>
  <script>
    let text = document.getElementById('text')
  </script>

• ถ้าต้องการจะซ่อน:

  text.hidden = true

  ถ้าต้องการจะแสดง:

  text.hidden = false

  ทดลองด้วยตัวเอง

  1. คลิกที่นี่เพื่อเปิดหน้าตัวอย่าง
  2. เมื่อหน้าเว็บโหลดแล้วให้เปิด JavaScript Console ขึ้นมา
  3. พิมพ์​ text.hidden = true ลงไปใน console → ข้อความจะหายไป
  4. พิมพ์​ text.hidden = false ลงไปใน console → ข้อความจะกลับมาแสดงอีกครั้ง

  ซ่อน/แสดง element

  element.hidden = boolean