Thuộc tính HTML DOM borderRight được sử dụng như một cách viết tắt để lấy hoặc đặt thuộc tính Right border cho một phần tử. Thuộc tính borderRight chứa border-Right-width, border-Right-style, border-Right-color.
Sau đây là cú pháp cho -
Đặt thuộc tính borderRight:
object.style.borderRight = "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 phải. |
| kiểu | Để thiết lập kiểu viền Phải. |
| màu | Để thiết lập màu viền Phải. |
| 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ẹ. |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderRight -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-Right: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderRight(){
document.getElementById("P1").style.borderRight="9px dashed red";
document.getElementById("Sample").innerHTML="The Right border for the paragraph element is now";
}
</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 Right border properties by clicking the below button</p>
<button onclick="changeBorderRight()">Change Border Right</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “Thay đổi đường viền phải” -
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-Right: 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 “Change Border Right” sẽ thực thi hàm changeBorderRight () khi người dùng nhấp vào.
pre class="result notranslate"> <button onclick="changeBorderRight()">Change Border Right</button>
Hàm changeBorderRight () nhận thuộc tính kiểu borderRight 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 của nó.
function changeBorderRight(){
document.getElementById("P1").style.borderRight="9px dashed red";
document.getElementById("Sample").innerHTML="The right border for the paragraph element is now ";
}