Cách đặt chiều rộng (width) của phần tử bằng JavaScript

Thuộc tính width thiết lập chiều rộng của **content box** (mặc định) hoặc **border box** (nếu box-sizing: border-box). Giá trị: độ dài (px, em, rem, %, vw...), auto, min-content, max-content, fit-content.

Ví dụ minh họa

Mã sau đặt width và height của nút bấm thành 250px khi nhấn:

<!DOCTYPE html>
<html>
<body>
  <button type="button" id="btn" onclick="changeSize()">
    Thay đổi chiều rộng và cao
  </button>
  <script>
    function changeSize() {
      const btn = document.getElementById("btn");
      btn.style.width = "250px";
      btn.style.height = "250px";
      /* Nút bấm sẽ biến thành hình vuông 250x250px */
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• box-sizing: Mặc định content-box → width = nội dung. Nếu border-box → width = content + padding + border.
• Phần tử inline: width **không tác dụng** trên span, a, strong... trừ khi chuyển thành inline-block, block, flex, grid.
• % tính theo width của containing block.
• min/max-width: Giới hạn width tối thiểu/tối đa: style.minWidth = "100px", style.maxWidth = "500px".
• Auto: Trình duyệt tự tính (thường fill container cho block).

Width vs height shorthand

Không có shorthand gộp width+height. Nhưng có thể dùng CSS custom properties:

el.style.cssText = "width: 250px; height: 250px;";

Mẹo: Dùng getBoundingClientRect().width để lấy width thực tế (rendered) bao gồm padding/border tùy box-sizing.