HTML DOM Style borderLeft Property

Thuộc tính HTML DOM borderLeft được sử dụng như một cách viết tắt để lấy hoặc đặt các thuộc tính đường viền bên trái cho một phần tử. Thuộc tính borderLeft chứa đường viền-left-width, border-left-style, border-left-color.

Sau đây là cú pháp cho -

Đặt thuộc tính borderImageWidth -

object.style.borderLeft = "width style color|initial|inherit"

Các thuộc tính trên được giải thích như sau -

Tham số	Mô tả
width	Để thiết lập chiều rộng đường viền bên trái.
style	Để thiết lập kiểu đường viền bên trái.
color	Để thiết lập màu đường viền bên trái.
đầu tiên	Để đặt thuộc tính này thành giá trị mặc định.
đầ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 borderLeft -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-left: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderLeft(){
      document.getElementById("P1").style.borderLeft="9px dashed red";
      document.getElementById("Sample").innerHTML="The left 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 left border properties by clicking the below button</p>
<button onclick="changeBorderLeft()">Change Border Left</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style borderLeft Property

Khi nhấp vào “Thay đổi đường viền sang trái” nút -

HTML DOM Style borderLeft Property

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-left: 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 sang trái” sẽ thực thi hàm changeBorderLeft () khi được người dùng nhấp vào.

<button onclick="changeBorderLeft()">Change Border Left</button>

Hàm changeBorderLeft () nhận thuộc tính kiểu borderLeft của phần tử đoạn vă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 changeBorderLeft(){
   document.getElementById("P1").style.borderLeft="9px dashed red";
   document.getElementById("Sample").innerHTML="The left border for the paragraph element is now changed";
}