如何使用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的四個屬性的輸入：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.