Thuộc tính style width trong HTML DOM

Thuộc tính style.width trong HTML DOM trả về và cho phép thay đổi thuộc tính CSS width của một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị width

object.style.width

Thay đổi width

object.style.width = "value"

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; margin: 1.5rem auto; }
  .btn { background: #db133a; 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 width 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ả. </p>
<button onclick="add()" class="btn">Thay đổi Width</button>
<script>
  function add() {
    document.querySelector('p').style.width = "50%";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thay đổi Width để thay đổi chiều rộng của phần tử đoạn văn.