Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Style borderImageRepeat Thuộc tính

Thuộc tính HTML DOM borderImageRepeat được sử dụng để xác định cách các lát hình ảnh được lặp lại trong hình ảnh đường viền. Điều này đặt hoặc lấy nếu đường viền Hình ảnh phải được làm tròn, lặp lại hoặc kéo dài.

Cú pháp

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

Đặt thuộc tính borderImageRepeat.

object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"

Giá trị

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

Sr.No Giá trị &Mô tả
1 Kéo dài
Điều này làm cho hình ảnh được kéo dài để lấp đầy khu vực. Đây là giá trị mặc định.
2 Lặp lại
Điều này làm cho hình ảnh được lặp lại để lấp đầy khu vực.
3 Vòng
Hình ảnh thường được lặp lại để lấp đầy khu vực và nó được thay đổi tỷ lệ nếu nó không lấp đầy toàn bộ số lần của khu vực.
4 Khoảng trắng
Tương tự như hình tròn nhưng nếu hình ảnh không được lặp lại nhiều lần thì không gian xung quanh các ô sẽ được phân phối.
5 tên đầu tiên
Để đặt thuộc tính này thành giá trị ban đầu.
6 kế thừa
Để kế thừa giá trị tài sản mẹ

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderImageRepeat -

<!DOCTYPE html>
<html>
<head>
<style>
   #b1 {
      border: 30px solid transparent;
      padding: 5px;
      border-image-source:
      url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
      border-image-repeat: repeat;
      border-image-slice: 30;
   }
</style>
<script>
   function changeBorderRepeat(){
      document.getElementById("b1").style.borderImageRepeat="stretch";
      document.getElementById("Sample").innerHTML="The border image will now be
      stretched";
   }
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p>
<p>Change the above div border image repeat property by clicking the below button</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Style borderImageRepeat Thuộc tính

Khi nhấp vào nút BIÊN GIỚI THUỘC -

HTML DOM Style borderImageRepeat Thuộc tính