Thuộc tính HTML DOM borderTop được sử dụng như một cách viết tắt để lấy hoặc đặt các thuộc tính Top border cho một phần tử. Thuộc tính borderTop chứa đường viền-Chiều rộng trên cùng, đường viền-Kiểu trên cùng, đường viền-Màu trên cùng.
Sau đây là cú pháp cho -
Đặt thuộc tính borderTop:
object.style.borderTop = "width style color|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Tham số | Mô tả |
|---|---|
| chiều rộng | Để thiết lập chiều rộng đường viền trên cùng. |
| kiểu | Để thiết lập kiểu đường viền Trên cùng. |
| màu | Để thiết lập màu đường viền Trên cùng. |
| 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 borderTop -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-Top: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="The Top border for the paragraph element is now changed ";
}
</script>
</head>
<body>
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
<p>Change the above paragraph Top border properties by clicking the below button</p>
<button onclick="changeBorderTop()">Change Border Top</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “Thay đổi đường viền trên cùng” nút -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo một đoạn văn có id “P1” chứa một số văn bản bên trong nó và một kiểu css tương ứng được áp dụng cho nó.
#P1 {
border-Top: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p> Sau đó, chúng tôi đã tạo một nút “Thay đổi đường viền trên cùng” sẽ thực thi hàm changeBorderTop () khi được người dùng nhấp vào.
<button onclick="changeBorderTop()">Change Border Top</button>
Hàm changeBorderTop () nhận thuộc tính kiểu borderTop của phần tử đoạn có id “P1” bằng cách sử dụng phương thức getElementById () và thay đổi giá trị thuộc tính của nó thành ‘9px gạch ngang màu đỏ’. Sau đó, một thông báo cho biết sự thay đổi này sẽ được hiển thị trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="The top border for the paragraph element is now changed";
}