Thuộc tính HTML DOM borderWidth được sử dụng như một cách viết tắt để lấy hoặc đặt thuộc tính chiều rộng đường viền cho một phần tử. Nó nhận từ một đến 4 giá trị theo những cách sau -
-
Nó chỉ định chiều rộng đường viền theo chiều kim đồng hồ nếu tất cả 4 giá trị đều được cung cấp.
-
Nếu chỉ một giá trị được cung cấp thì cùng một chiều rộng sẽ được áp dụng cho cả 4 đường viền.
-
Nếu hai giá trị được đưa ra thì trên và dưới được đặt thành giá trị đầu tiên và trái và phải được đặt thành giá trị thứ hai.
-
Sau đây là cú pháp cho -
Đặt thuộc tính borderWidth:
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
Các giá trị thuộc tính được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| gầy | Để chỉ định màu đường viền bên trái. Màu mặc định được đặt thành đen |
| phương tiện | Điều này chỉ định đường viền trung bình và là giá trị mặc định. |
| dày | Điều này chỉ định một đường viền mỏng. |
| chiều dài | Điều này được sử dụng để chỉ định chiều rộng đường viền theo đơn vị chiều dài. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho Thuộc tính borderWidth -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-width:30px;
}
</style>
<script>
function changeBorderWidth(){
document.getElementById("DIV1").style.borderWidth="5px";
document.getElementById("Sample").innerHTML="The border width is now decreased";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi chiều rộng đường viền Nút ”-
