Thuộc tính chiều rộng kiểu DOM HTML trả về và sửa đổi thuộc tính CSS chiều rộng của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Chiều rộng trả về
object.style.width
-
Đang sửa đổi chiều rộng
object.style.width = “value”
Ví dụ
Hãy để chúng tôi xem một ví dụ về 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>DOM Style width Property Example</h1>
<p>
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change Width</button>
<script>
function add() {
document.querySelector('p').style.width = "50%";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi chiều rộng ”Để thay đổi chiều rộng của phần tử đoạn văn -
