Thuộc tính style maxWidth trong HTML DOM

Thuộc tính style.maxWidth trong HTML DOM trả về và cho phép thay đổi chiều rộng tối đa (maximum width) của một phần tử trong tài liệu HTML. Phần tử sẽ không bao giờ rộng hơn giá trị này.

Cú pháp

Lấy giá trị maxWidth

object.style.maxWidth

Thay đổi maxWidth

object.style.maxWidth = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
none	Không giới hạn chiều rộng phần tử (mặc định).
inherit	Kế thừa giá trị từ phần tử cha.
initial	Đặt về giá trị mặc định.
length	Thiết lập giá trị theo đơn vị độ dài (px, em, rem, v.v.).
percentage(%)	Thiết lập giá trị theo phần trăm chiều rộng phần tử cha.

Ví dụ

Ví dụ sử dụng thuộc tính style.maxWidth:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); height: 100vh; }
  p { border: 2px solid #fff; }
  .btn { background: coral; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style maxWidth DOM</h1>
<p> Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. </p>
<button onclick="add()" class="btn">Thiết lập maxWidth</button>
<script>
  function add() {
    document.querySelector('p').style.maxWidth = "200px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thiết lập maxWidth để thiết lập chiều rộng tối đa cho phần tử đoạn văn.