如何使用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的四个属性的输入：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 次浏览

启动您的职业生涯

完成课程获得认证

开始
广告