Thuộc tính HTML DOM borderImageWidth được sử dụng để đặt hoặc lấy chiều rộng của hình ảnh đường viền cho một phần tử.
Sau đây là cú pháp cho -
Đặt thuộc tính borderImageWidth -
object.style.borderImageWidth = "number|%|auto|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| chiều dài | Để mô tả kích thước chiều rộng đường viền tính bằng px. |
| số | Để mô tả chiều rộng đường viền theo bội số của chiều rộng đường viền tương ứng và giá trị mặc định của nó là 1. |
| % | Để mô tả độ lệch ngang và độ lệch dọc đối với chiều rộng vùng hình ảnh đường viền. |
| tự động | Điều này đặt chiều rộng và chiều cao tương ứng với chiều rộng và chiều cao của hình ảnh. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị mặc định. |
| 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 borderImageWidth -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
padding: 25px;
border-style: solid;
border-color: transparent;
border-image-slice: 30;
border-image-source: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini- logo.jpg");
border-image-width: 10px;
}
</style>
<script>
function changeBorderWidth(){
document.getElementById("DIV1").style.borderImageWidth="30px";
document.getElementById("Sample").innerHTML="The border image width is now increased";
}
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Increase the above div border image 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 “Thay đổi chiều rộng đường viền” nút -
