如何使用 JavaScript 設定影像邊框是否重複、圓角或拉伸？

本教程將教會我們如何使用 JavaScript 設定邊框影像是否應重複、圓角或拉伸。使用 borderImageRepeat 屬性來設定影像邊框是重複、圓角還是拉伸。

邊框用於裝飾或突出元素。您可以定義其寬度、顏色和邊框型別。各種樣式可以應用於邊框。但是，這些邊框沒有任何特殊效果或其他設計。

使用border-image屬性，我們可以將影像設定為元素的邊框。它看起來不像一條線。它將是我們選擇作為邊框的影像。border-image 是一個 CSS 屬性，它將影像設定為邊框。這也可以使用 JavaScript DOM 的 borderImage 樣式屬性來完成。

還有多個屬性可以為邊框影像設定樣式。您可以使用名為 borderImageRepeat 屬性的 JavaScript 樣式，使邊框影像重複、圓角或拉伸。

因此，讓我們看看如何使用 JavaScript 設定邊框影像是否應重複、圓角或拉伸。

以下是我們可以設定影像邊框是否應重複、圓角或拉伸的屬性：

  • 使用 borderImageRepeat 屬性
  • 使用 borderImage 屬性

使用 DOM 的 borderImageRepeat 屬性

有許多不同尺寸的影像。因此，它們不會適合邊框的寬度。用於設定邊框影像應重複、圓角或拉伸的 borderImageRepeat。使用此屬性，我們可以定義影像是否可以重複或透過拉伸填充整個區域。

使用者可以按照以下語法使用 JavaScript 設定邊框影像重複。

語法

var element = document.getElementById(" <Id here> ");
element.style.borderImageRepeat = "stretch|repeat|round|initial | inherit"

您可以按照上述語法設定 borderImageRepeat 屬性。

引數

  • stretch - 拉伸影像以填充整個邊框區域。
  • repeat - 對所有可用空間重複影像。
  • round - 重複影像並調整影像大小以填充區域。
  • initial - 設定為預設值。
  • inherit - 從其父級繼承。

示例

在以下示例中，我們使用了 borderImageRepeat 屬性將影像新增為元素的邊框。我們使用了 round 值來用影像填充區域並對其進行重新縮放。

<!DOCTYPE html>
<html>
<head>
   <style>
      div{
         background-color: blue;
         border: 30px solid;
         border-image:
         url('https://tutorialspoint.tw/html5/images/html5-mini-logo.jpg');
         border-image-slice: 10 10 30 30;
         border-image-width: 1 1 1 1;
         border-image-repeat: stretch;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
   </div>
   <button onclick="display()">Click me!</button>
   <script>
      function display() {
         document.getElementById("box").style.borderImageRepeat =
         "round";
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們使用了 borderImageRepeat 屬性來使用 JavaScript 將影像設定為元素的邊框。

使用 DOM 的 borderImage 屬性

我們將宣告一個頻寬度的邊框，然後影像將新增到邊框的寬度內。但是，影像的尺寸不同，因此它們不會精確地適合邊框。我們可以使其保持原始大小，拉伸以使其適合，或者重複直到適合邊框。

borderImage 屬性是一個簡寫，包含用於使用邊框影像並對其設定樣式的屬性。它包含諸如影像源、影像寬度、邊框影像的偏移量和影像的重複等屬性。

我們可以使用 borderImage 屬性將影像設定為邊框。使用者可以按照以下語法在 JavaScript 中使用 borderImage 屬性。

語法

var element = document.getElementById("<Element id here>");
element.style.border = " <Enter values> ";
element.style.borderImage = " <Image_source> <border_slice>
<border_width> <border_outset> <repeat||initial||inherit>";

按照上述語法，您可以使用 JavaScript 將影像設定為邊框。

引數

  • Image_source - 影像源
  • border_slice - 影像邊框的內偏移量
  • border_width - 影像邊框的寬度
  • border_outset - 影像邊框的外偏移量
  • repeat - 重複影像、拉伸影像或圓角影像
  • initial - 設定為屬性的預設值
  • inherit - 從其父級繼承屬性的值

示例

在示例中，我們從使用者那裡獲取 URL 和 repeat 值作為輸入。使用者可以使用任何影像的 URL 將其顯示為邊框，並選擇 repeat 屬性的任何值。單擊按鈕後，URL 的影像將作為下方容器的邊框新增。

<html>
<body id = "body">
   <h3> Use <i> borderImage </i> property to set the border image repeat
   </h3>
   <label for = "url"> Enter Image URL </label>
   <input type = "text" id = "url" value = "" name = "URL"/> <br>
   <label> Select Repeat behaviour </label>
   <select id = "repeat_select">
      <option value = "stretch"> stretch
      </option>
      <option value = "repeat"> repeat
      </option>
      <option value = "round"> round
      </option>
   </select>
   <br>
   <button id = "btn">Submit</button>
   <div id = "container">
      This is a container
   </div>
   <script>
      var div = document.getElementById("container");
      div.style.width = "30%";
      div.style.height = "30%";
      div.style.border = "20px solid black";
      div.style.margin = "10px";
      div.style.textAlign = "center";
      document.getElementById("btn").addEventListener("click", execute);
      function execute(){
      var selectElement = document.querySelector('#repeat_select');
         var selected = selectElement.value;
         var URL = document.getElementById("url").value;
         div.style.borderImage = "url("+URL+")" + " 50 50 " + selected;
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們正在新增影像作為邊框，併為影像設定重複行為。我們使用了 borderImage 屬性來設定影像的重複行為。

在本教程中，我們學習瞭如何使用 JavaScript 設定邊框影像是否應重複、圓角或拉伸。

更新於：2022年10月26日

113 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.