如何使用 JavaScript 设置图像边框的向内偏移?
在本教程中，我们将学习如何使用 JavaScript 设置图像边框的向内偏移。
可以使用 CSS 属性将图像设置为边框中的边框图像。可以使用不同的参数设置边框图像。要设置图像边框的向内偏移，请使用 JavaScript 中的 borderImageSlice 属性。
我们将看到两种使用 JavaScript 设置图像边框向内偏移的不同方法 -
borderImageSlice 属性
setProperty 方法
使用 borderImageSlice 属性
边框图像的向内偏移由 JavaScript 的 borderImageSlice 属性指定。元素对象的样式对象具有 borderImage 属性。可以使用 document.getElementById() 方法访问元素对象，然后我们可以设置 borderImageSlice 属性。
语法
document.getElementById('el').style.borderImageSlice = number | % | fill | inherit | initial
在上述语法中，document.getElementById() 方法和 borderImageSlice 属性用于设置图像边框的向内偏移量。
参数
number − 边框图像的向内偏移量(以像素为单位)。
% − 边框图像的向内偏移量(以百分比为单位)。
fill − 要显示的边框图像的中间部分。
inherit − 边框图像的向内偏移量从其父元素的属性继承而来。
initial − 边框图像的向内偏移量设置为默认值。
示例
在下面例如，我们使用 JavaScript 的 borderImageSlice 属性设置了图像边框的向内偏移。此外，我们还使用了"setInwardOffset()"函数，该函数响应按钮单击事件"设置向内偏移"，使用不同的值设置多个元素的边框图像的向内偏移。
<html> <head> <style> div { padding: 15px; margin: 5px 0px; background-color: rgb(214, 207, 254); border: 20px dashed; border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <h2> Set the inward offsets of the image border using the <i> style.borderImageSlice </i> property </h2> <button onclick="setInwardOffset()"> Set Inward Offset </button> <div id="el1"> The Element No. 1 </div> <div id="el2"> The Element No. 2 </div> <div id="el3"> The Element No. 3 </div> <script> // All elements const element1 = document.getElementById('el1'); const element2 = document.getElementById('el2'); const element3 = document.getElementById('el3'); // 'Set Inward Offset' button click event handler function function setInwardOffset() { element1.style.borderImageSlice = '20% 20%'; element1.innerHTML = 'The Element No. 1 (borderImageSlice: 20% 20%)' element2.style.borderImageSlice = '15%'; element2.innerHTML = 'The Element No. 1 (borderImageSlice: 15%)' element3.style.borderImageSlice = '10% 20% 30% 40%'; element3.innerHTML = 'The Element No. 1 (borderImageSlice: 10% 20% 30% 40%)' } </script> </body> </html>
使用 setProperty 方法
JavaScript 中的 setProperty 方法用于通过在其参数中获取属性名称和属性值来设置元素的任何新属性或现有属性。此方法在元素对象中存在的样式对象中可用。document.getElementById() 方法用于获取元素对象，以便我们可以执行 setProperty 方法。例如，要设置边框图像的向内偏移量，setProperty 方法将"border-image-slice"作为第一个参数，在第二个参数中，它采用值。
语法
document.getElementById('el').style.setProperty(name, value, priority)
在上述语法中，document.getElementById() 方法用于访问元素对象，以便我们可以对其使用 setProperty 方法。
参数
name − 属性的名称。
value − 属性值。
priority − 属性值的优先级(可选)。
示例
在下面的示例中，我们使用 JavaScript 的 setProperty 方法设置了图像边框的向内偏移。我们使用输入字段从用户处获取向内偏移的值，并使用按钮"设置向内偏移"，在点击事件上执行"setInwardOffset()"函数。
<html> <head> <style> div { padding: 15px; margin: 5px 0px; background-color: rgb(214, 207, 254); border: 20px dashed; border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <h2> Set the inward offsets of the image border using the <i> setProperty </i> method </h2> <h4> Enter the inward offset value for the border image: </h4> <input type="text" id="inward-offset" name="inward-offset" value="20%"> <button onclick="setInwardOffset()"> Set Inward Offset </button> <div id="root"> It is an element </div> <script> // 'Set Inward Offset' button click event handler function function setInwardOffset() { const root = document.getElementById('root'); // user input value for inward offset const inward_offset_value = document.getElementById('inward-offset').value; root.style.borderImageSlice = inward_offset_value; root.innerHTML = 'It is an element (borderImageSlice:' + inward_offset_value + ')'; } </script> </body> </html>
在本教程中，我们讨论了使用 JavaScript 设置图像向内偏移的两种方法。第一种方法是使用 borderImageSlice 属性，另一种方法是使用 setProperty() 方法。
