Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ top ของ Window ใน HTML


คุณสมบัติ top ของ Window ใน HTML จะคืนค่าหน้าต่างเบราว์เซอร์บนสุด (topmost window) ของหน้าต่างปัจจุบัน

รูปแบบการใช้งาน (Syntax)

window.top

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

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 30%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .show{
    font-size:1.2rem;
  }
</style>
<body>
<h1>ตัวอย่างคุณสมบัติ top ของ Window</h1>
<button onclick="create()" class="btn">ตรวจสอบหน้าต่างปัจจุบันเป็น topmost หรือไม่</button>
<div class="show"></div>
<script>
  function create(){
    if(window.top === window.self){
      document.querySelector('.show').innerHTML='หน้าต่างปัจจุบันคือหน้าต่างบนสุด (topmost window)';
    } else{
      document.querySelector('.show').innerHTML='หน้าต่างปัจจุบันไม่ใช่หน้าต่างบนสุด';
    }
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกที่ปุ่ม "ตรวจสอบหน้าต่างปัจจุบันเป็น topmost หรือไม่" เพื่อตรวจสอบว่าหน้าต่างปัจจุบันเป็นหน้าต่างบนสุดหรือไม่:

คุณสมบัติ top ของ Window ใน HTML

คุณสมบัติ top ของ Window ใน HTML