วิธีตรวจสอบว่าองค์ประกอบซ่อน

เรียนรู้ว่าด้วยการตรวจสอบองค์ประกอบที่ซ่อนด้วย JavaScript

ตรวจสอบองค์ประกอบที่ซ่อน

ตัวอย่าง

ถ้าองค์ประกอบ <div> ถูกซ่อน ต้องทำงานตามนี้:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    // ทำงานบางสิ่ง..
  }
}

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

สัญญาณเตือน:เมื่อใช้ display:none ขณะซ่อนองค์ประกอบ (เช่นตัวอย่างด้านบน) องค์ประกอบนั้นจะไม่ใช้ช่องที่มีอยู่

เพื่อตรวจสอบว่าองค์ประกอบใดซ่อน visibility:hidden ซ่อนไว้ อ่านตัวอย่างด้านล่างนี้. องค์ประกอบ "ซ่อน" นี้จะใช้ช่องที่มีอยู่

ตัวอย่าง

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    // ทำงานบางสิ่ง..
  }
}

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

หน้าที่เกี่ยวข้อง

教程：CSS แสดง

教程：如何切换隐藏/显示元素