เมธอด resizeBy() ของ Window ใน HTML

เมธอด resizeBy() ของ Window ใน HTML ใช้สำหรับปรับขนาดหน้าต่างสัมพัทธ์กับขนาดปัจจุบัน (relative size) โดยระบุจำนวนพิกเซลที่ต้องการเพิ่มหรือลด

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

window.resizeBy(w, h)

โดยที่ w และ h คือจำนวนพิกเซลที่ต้องการปรับเปลี่ยนความกว้างและความสูงตามลำดับ (ค่าบวก = ขยาย, ค่าลบ = ย่อ)

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

<!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: 20%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
<body>
<h1>ตัวอย่างเมธอด resizeBy() ของ Window</h1>
<button onclick="create()" class="btn">สร้างหน้าต่างใหม่</button>
<button onclick='resize()' class="btn">ปรับขนาดหน้าต่าง</button>
<script>
  var newWindow;
  function create(){
    newWindow = window.open('', '', 'width=80,height=80');
  }
  function resize(){
    newWindow.resizeBy(100, 100);
    newWindow.focus();
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกที่ปุ่ม "สร้างหน้าต่างใหม่" เพื่อสร้างหน้าต่างใหม่ขนาดเล็ก:

จากนั้นคลิกที่ปุ่ม "ปรับขนาดหน้าต่าง" เพื่อขยายขนาดหน้าต่างที่เพิ่งสร้างเพิ่ม 100x100 พิกเซล: