Thuộc tính HTML DOM borderStyle được sử dụng như một cách viết tắt để lấy hoặc đặt các thuộc tính kiểu đườ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 kiểu đườ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 kiểu 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 borderStyle:
object.style.borderLeftStyle = value
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| Không có | Đây là giá trị mặc định chỉ định không có đường viền. |
| Ẩn | Điều này giống như "none" nhưng sẽ vẫn chiếm khoảng cách đường viền. Về cơ bản nó là minh bạch nhưng vẫn còn đó. |
| Chấm | Điều này xác định một đường viền có dấu chấm. |
| Dấu gạch ngang | Điều này xác định một đường viền đứt nét. |
| Rắn | Điều này xác định một đường viền chắc chắn. |
| Nhân đôi | Điều này xác định một đường viền kép |
| Rãnh | Điều này xác định đường viền rãnh 3d và ngược lại với đường viền. |
| Đỉnh núi | Điều này xác định đường viền có rãnh 3D và ngược lại với đường rãnh |
| Inset | Điều này xác định đường viền chèn 3D và hiệu ứng trông giống như nó được nhúng. Nó tạo ra hiệu ứng ngược lại ngay từ đầu. |
| Phần bù | Điều này xác định một đường viền in 3D và hiệu ứng trông giống như nó được làm nổi. Nó tạo ra hiệu ứng ngược lại với inset. |
| Ban đầu | Để đặ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 borderStyle -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle(){
document.getElementById("DIV1").style.borderStyle="dashed";
document.getElementById("Sample").innerHTML="The border style is now changed to dashed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border style by clicking the below button</p>
<button onclick="changeBorderStyle()">Change Border Style</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “Thay đổi kiểu đường viền” nút -
