HTML DOM Style borderImageSource Property

Thuộc tính HTML DOM borderImageSource được sử dụng để thiết lập hoặc trả về nguồn của hình ảnh được sử dụng làm hình ảnh đường viền cho một phần tử.

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

Đặt thuộc tính borderImageSource -

object.style.borderImageSource = "none|image|initial|inherit"

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

Giá trị	Mô tả
Không có	Điều này có nghĩa là không có hình ảnh nào được sử dụng. Nó sẽ áp dụng các kiểu đường viền nếu chúng được chỉ định.
Hình ảnh	Để cung cấp đường dẫn của hình ảnh được sử dụng làm đường viền. Đường dẫn đến hình ảnh được sử dụng làm đường viền
ốm	Nó được sử dụng để giữ phần giữa hình ảnh đường viền.
Ban đầu	Để đặ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 borderImageSource -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      width: 400px;
      margin: 15px;
      padding: 10px;
      border: 20px solid transparent;
      border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
      border-image-slice: 30;
   }
</style>
<script>
   function changeBorderImage(){
      document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
      document.getElementById("Sample").innerHTML="The border image is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style borderImageSource Property

Khi nhấp vào “Thay đổi hình ảnh đường viền” nút -

HTML DOM Style borderImageSource Property

Trong ví dụ trên -

Chúng tôi đã tạo một div với id “DIV1” có kiểu css tương ứng được áp dụng cho nó và chứa một số văn bản trong đó. Chúng tôi đã chỉ định hình ảnh đường viền bằng cách sử dụng thuộc tính border-image-source trong kiểu css và chỉ định url hình ảnh làm giá trị thuộc tính -

#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg ");
border-image-slice: 30;
}
<div id="DIV1">This is some sample text inside div</div>

Sau đó, chúng tôi tạo nút “ Thay đổi hình ảnh đường viền ”Sẽ thực thi phương thức changeBorderImage () khi được người dùng nhấp vào -

<button onclick="changeBorderImage()">Change Border Image</button>

ChangeBorderImage () nhận phần tử DIV1 bằng cách sử dụng phương thức getElementById () và nhận giá trị thuộc tính borderImageSource của nó. Sau đó, nó gán cho nó url hình ảnh bằng cách gán giá trị url trong phương thức url. Sau đó, nó hiển thị thông báo dự định cho biết sự thay đổi này trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -

function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url(''https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}