Thuộc tính style minWidth trong HTML DOM

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

Cú pháp

Lấy giá trị minWidth

object.style.minWidth

Thay đổi minWidth

object.style.minWidth = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
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.minWidth:

<!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; width: 30%; }
  .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 minWidth 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 minWidth</button>
<script>
  function add() {
    document.querySelector('p').style.minWidth = "300px";
  }
</script>
</body>
</html>

Kết quả

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