คุณสมบัติ HTML DOM Style visibility

คุณสมบัติ style.visibility ของ HTML DOM ใช้สำหรับดึงหรือกำหนดการมองเห็นขององค์ประกอบในเอกสาร HTML ว่าควรแสดงผลหรือซ่อนไว้

ไวยากรณ์ (Syntax)

การดึงค่า visibility

object.style.visibility

การกำหนดค่า visibility

object.style.visibility = "value"

ค่าที่เป็นไปได้ (Values)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ visibility เพื่อซ่อนองค์ประกอบ <p> เมื่อคลิกปุ่ม

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
</style>
</head>
<body>
<h1>ตัวอย่าง DOM Style visibility Property</h1>
<p>ฉันคือองค์ประกอบพารากราฟที่มีข้อความตัวอย่าง</p>
<button onclick="add()" class="btn">ตั้งค่า visibility</button>
<script>
  function add() {
    document.querySelector('p').style.visibility = "hidden";
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม "ตั้งค่า visibility" - พารากราฟแสดงปกติ

หลังคลิกปุ่ม "ตั้งค่า visibility" - พารากราฟหายไป แต่พื้นที่ยังคงถูกครองไว้

หมายเหตุ: ต่างจาก display: none ที่จะนำองค์ประกอบออกจากเค้าโครงทั้งหมด คุณสมบัติ visibility: hidden จะซ่อนเนื้อหาแต่ยังคงพื้นที่ไว้