如何使用 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.com/images/neo4j.png')"
         element2.style.borderImage = "url('https://tutorialspoint.com/images/neo4j.png') 40% 30% stretch"
         element3.style.borderImage = "url('https://tutorialspoint.com/images/neo4j.png') 40% 30% round"
         element4.style.borderImage = "url('https://tutorialspoint.com/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.com/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.