Cách cho phép người dùng thay đổi kích thước phần tử (resize) bằng JavaScript

Thuộc tính resize kiểm soát việc người dùng có thể kéo thay đổi kích thước phần tử hay không. Phần tử phải có overflow != visible (thường là auto, hidden, scroll) thì resize mới hoạt động.

Ví dụ minh họa

Mã sau bật tính năng resize cho div (cho phép kéo cả ngang và dọc) khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 350px;
      height: 200px;
      overflow: auto; /* BẮT BUỘC: resize chỉ hoạt động khi overflow != visible */
      background-color: orange;
      border: 3px solid red;
      resize: none; /* Mặc định: không cho resize */
    }
  </style>
</head>
<body>
  <p>Nhấn nút để bật resize (kéo góc dưới phải)</p>
  <button type="button" onclick="enableResize()">Bật Resize</button>
  <div id="box">
    <p>Đây là div. Kéo góc dưới phải để thay đổi kích thước.</p>
  </div>
  <script>
    function enableResize() {
      document.getElementById("box").style.resize = "both";
      /* Giá trị: "none" | "both" | "horizontal" | "vertical" | "block" | "inline" */
    }
  </script>
</body>
</html>

Các giá trị của resize

Giá trị	Mô tả
`none`	Không cho resize (mặc định)
`both`	Cho resize cả ngang và dọc
`horizontal`	Chỉ resize ngang
`vertical`	Chỉ resize dọc
`block`	Resize theo block direction (thường là dọc)
`inline`	Resize theo inline direction (thường là ngang)

Lưu ý quan trọng

overflow != visible: Nếu overflow: visible, resize sẽ bị vô hiệu hóa.
Phần tử inline: Không áp dụng cho phần tử inline (trừ inline-block, inline-flex...).
min/max width/height: Kết hợp min-width, max-width, min-height, max-height để giới hạn phạm vi resize.
Góc kéo: Trình duyệt thường hiển thị biểu tượng góc dưới phải (handle) để người dùng kéo.