คุณสมบัติ resize ของ HTML DOM Style

คุณสมบัติ style.resize ใน HTML DOM ใช้สำหรับ อ่าน หรือ กำหนด ว่าองค์ประกอบ (element) ใดๆ สามารถปรับขนาดได้โดยผู้ใช้หรือไม่ในเอกสาร HTML

รูปแบบไวยากรณ์ (Syntax)

การอ่านค่า

object.style.resize

การกำหนดค่า

object.style.resize = "value"

ค่าที่ใช้ได้ (Values)

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

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: sans-serif;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
  }
  .resize-div {
    border: 2px solid #333;
    width: 300px;
    height: 150px;
    overflow: auto; /* จำเป็นต้องมี overflow ไม่ใช่ visible */
    background: white;
    padding: 15px;
    margin-bottom: 20px;
    resize: none; /* เริ่มต้นไม่ให้ปรับขนาด */
  }
  .btn {
    background: #db133a;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  .btn:hover { background: #b0102e; }
</style>
</head>
<body>
  <h1>ตัวอย่าง DOM Style resize Property</h1>
  <div class="resize-div" id="targetDiv">
    <p>ลองคลิกปุ่มด้านล่างเพื่อเปิดใช้งานการปรับขนาด แล้วลากมุมขวาล่างของกล่องนี้</p>
  </div>
  <button onclick="enableResize()" class="btn">เปิดใช้งาน Resize (Both)</button>

  <script>
    function enableResize() {
      document.getElementById('targetDiv').style.resize = "both";
      alert("ตอนนี้คุณสามารถลากมุมขวาล่างของกล่องเพื่อปรับขนาดได้แล้ว");
    }
  </script>
</body>
</html>

ผลลัพธ์

1. กล่อง div เริ่มต้นไม่สามารถปรับขนาดได้ (resize: none)
2. คลิกปุ่ม "เปิดใช้งาน Resize (Both)"
3. กล่องจะแสดงเครื่องมือลาก (resize handle) ที่มุมขวาล่าง
4. ผู้ใช้สามารถลากเพื่อเปลี่ยนขนาดทั้งความกว้างและความสูงได้

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้