如何使用 JavaScript 設定用作邊框的影像？

在本教程中，我們將學習如何使用 JavaScript 設定用作邊框的影像。

HTML 元素的輪廓稱為邊框。`border-image` CSS 屬性用於將影像設定為元素周圍的邊框。它是以下屬性的簡寫：border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat。

要使用 JavaScript 設定用作邊框的影像，我們有不同的方法：

  • 使用 style.borderImage 屬性

  • 使用 style.setProperty 方法

使用 style.borderImage 屬性

元素的 style.borderImage 屬性指定將用於邊框的影像。style.borderImage 屬性在元素的元素物件上可用。首先，我們必須使用 document.getElementById() 方法獲取元素的元素物件。其次，我們應該使用 style.borderImage 屬性設定邊框影像。

語法

document.getElementById('id').style.borderImage = border-image-source border-image-slice border-image-width border-image-outset border-image-repeat | inherit | initial

在上面的語法中，“id”是元素的 id 屬性。document.getElementById() 方法用於訪問元素物件，然後我們使用 style.borderImage 屬性設定邊框影像。

引數

  • border-image-source − 邊框影像的路徑或 URL。

  • border-image-slice − 指定如何切片邊框影像。

  • border-image-width − 邊框影像的寬度。

  • border-image-outset − 應該擴充套件邊框框的邊框影像區域的數量。

  • border-image-repeat − 邊框影像的重複。

  • inherit − 邊框影像從其父元素的屬性繼承。

  • initial − 邊框影像設定為預設值。

示例

在下面的示例中，我們使用了 style.borderImage 屬性來使用 JavaScript 設定用作邊框的影像。我們使用了 "setBorderImage()" 函式，該函式針對多個元素設定具有不同值的邊框影像，以響應按鈕單擊事件“設定邊框影像”。

<html>
<head>
   <style>
      div {
         padding: 15px;
         margin: 5px 0px;
         border: 20px solid transparent;
         background-color: rgb(236, 236, 236);
      }
   </style>
</head>
<body>
   <h2> Set the image to be used as a border using <i> style.borderImage property </i> with JavaScript </h2>
   <button onclick="setBorderImage()"> Set Border Image </button>
   <div id="element1"> This is element 1 </div>
   <div id="element2"> This is element 2 </div>
   <div id="element3"> This is element 3 </div>
   <div id="element4"> This is element 4 </div>
   <script>
      
      // all elements
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      
      // 'Set Border Image' button click event handler function
      function setBorderImage() {
         
         // set the border image of an element using the style.borderImage property
         element1.style.borderImage = "url('https://tutorialspoint.tw/images/neo4j.png')"
         element2.style.borderImage = "url('https://tutorialspoint.tw/images/neo4j.png') 40% 30% stretch"
         element3.style.borderImage = "url('https://tutorialspoint.tw/images/neo4j.png') 40% 30% round"
         element4.style.borderImage = "url('https://tutorialspoint.tw/images/neo4j.png') 15% 10% 20% round"
      }
   </script>
</body>
</html>

使用 style.setProperty 方法

在 JavaScript 中，無論元素屬性是新的還是已存在的，都使用 style.setProperty 方法設定。也可以使用此方法設定元素的邊框影像。使用 document.getElementById() 方法訪問元素物件，然後使用 setProperty 方法設定“border-image”屬性。style.setProperty 方法的屬性名稱引數應為“border-image”，值和優先順序將根據使用者的需求而定。

語法

document.getElementById('id').style.setProperty(property_name, value, priority)

在上面的語法中，document.getElementById() 方法用於訪問具有 id 屬性設定為“id”的元素物件，然後在該元素物件上，我們使用 style.setProperty 方法。

引數

  • property_name − 要設定的屬性的名稱。

  • value − 屬性的新值。

  • priority − 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用了 style.setProperty 方法來使用 JavaScript 設定用作邊框的影像。我們使用了五個輸入欄位來獲取使用者對邊框影像的四個屬性的輸入：border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat。按鈕“設定邊框影像”與執行“setBorderImage()”函式的單擊事件相關聯，該函式設定元素的邊框影像。

<html>
<head>
   <style>
      #root {
         padding: 15px;
         margin: 5px 0px;
         border: 20px solid transparent;
         background-color: rgb(236, 236, 236);
      }
      label {
         margin-right: 5px;
         font-weight: bold;
      }
      .input-field {
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <h2>Set the image to be used as a border using <i> style.setProperty method </i> with JavaScript</h2>
   <h4>Enter the properties of border-image:</h4>
   <div>
      <div class="input-field">
         <label for="border-image-source">border-image-source:</label>
         <input id="border-image-source" type="text" name="border-image-source" value="https://tutorialspoint.tw/images/neo4j.png">
      </div>
      <div class="input-field">
         <label for="border-image-slice">border-image-slice:</label>
         <input id="border-image-slice" type="text" name="border-image-slice" value="30">
      </div>
      <div class="input-field">
         <label for="border-image-width">border-image-width:</label>
         <input id="border-image-width" type="text" name="border-image-width" value="10%">
      </div>
      <div class="input-field">
         <label for="border-image-outset">border-image-outset:</label>
         <input id="border-image-outset" type="text" name="border-image-outset" value="30">
      </div>
      <div class="input-field">
         <label for="border-image-repeat">border-image-repeat:</label>
         <input id="border-image-repeat" type="text" name="border-image-repeat" value="round">
      </div>
   </div>
   <button onclick="setBorderImage()">Set Border Image</button>
   <div id="root">This element's border image is sets according to input fields value!</div>
   <script>
      function setBorderImage() {
         const root = document.getElementById('root')
         
         // All input fields' value
         const border_image_source = document.getElementById('border-image-source').value
         const border_image_slice = document.getElementById('border-image-slice').value
         const border_image_width = document.getElementById('border-image-width').value
         const border_image_outset = document.getElementById('border-image-outset').value
         const border_image_repeat = document.getElementById('border-image-repeat').value
         
         // set the border image of a element
         root.style.setProperty('border-image', 'url(' + border_image_source + ') ' + border_image_slice + ' ' + border_image_width + ' ' + border_image_outset + ' ' + border_image_repeat)
      }
   </script>
</body>
</html>

在本教程中，我們討論了兩種使用 JavaScript 設定四個過渡屬性的方法。第一種方法是使用 style.borderImage 屬性，另一種方法是使用 style.setProperty() 方法。

更新於：2022年11月11日

978 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.