Thuộc tính HTML DOM borderTopStyle được sử dụng để thiết lập hoặc trả về kiểu đường viền Trên cùng cho một phần tử.
Sau đây là cú pháp cho -
Đặt thuộc tính borderTopStyle -
object.style.borderTopStyle = 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 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. |
| đầu tiên | Đ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. |
| 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ẹ |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderTopStyle trừ;
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
</style>
<script>
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Top border style by clicking the below button</p>
<button onclick="changeTopStyle()">Change Top Style</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi kiểu hàng đầu Nút ”-
Trong ví dụ trên -
Trước tiên, chúng tôi đã tạo một div với id “DIV1” và áp dụng kiểu CSS cho nó dựa trên id của nó. Kiểu chứa kiểu viền trên cùng và chủ yếu là chiều rộng của nó -
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
<div id="DIV1">SOME SAMPLE TEXT</div> Sau đó, chúng tôi đã tạo một nút “Thay đổi kiểu hàng đầu” sẽ thực thi phương thức changeTopStyle () khi được người dùng nhấp vào -
<button onclick="changeTopStyle()">Change Top Style</button>
Phương thức changeTopStyle () nhận phần tử div với id “DIV1” bằng cách sử dụng getElementById () và đặt thuộc tính kiểu borderTopStyle của nó thành gạch ngang. Sau đó, sự thay đổi này được phản ánh trong đoạn văn có id là “Sample” bằng cách hiển thị văn bản đã cho bằng cách sử dụng thuộc tính innerHTML của nó.
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
}