Thuộc tính đường viền HTML DOM Style được sử dụng để lấy hoặc đặt thuộc tính đường viền cho một phần tử. Nó là thuộc tính viết tắt cho chiều rộng đường viền, kiểu đường viền và màu đường viền.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính đường viền -
object.style.border = "width style color|initial|inherit"
Tham số
Các thuộc tính trên được giải thích như sau -
| Sr.No | Thông số &Mô tả |
|---|---|
| 1 | Chiều rộng Để thiết lập chiều rộng đường viền |
| 2 | Kiểu Để thiết lập chiều rộng đường viền |
| 3 | Màu Để thiết lập chiều rộng đường viền |
| 4 | Ban đầu Để đặt thuộc tính này thành giá trị ban đầu. |
| 5 | Kế thừa Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính biên giới -
<!DOCTYPE html>
<html>
<head>
<style>
#IMG1 {
border: 2px solid orange;
box-shadow: 2px 2px 4px 1px seagreen;
}
</style>
<script>
function changeBorder(){
document.getElementById("IMG1").style.border="4px dotted pink";
document.getElementById("Sample").innerHTML="The border for the image is now changed";
}
</script>
</head>
<body>
<h2>Learn XAMARIN</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/xamarin/images/xamarin-minilogo.jpg">
<p>Change the above image border clicking the below button</p>
<button onclick="changeBorder()">CHANGE BORDER</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào THAY ĐỔI BIÊN GIỚI -
