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