数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 设置图像边框的内边距？
在本教程中，我们将学习如何使用JavaScript设置图像边框的内边距。
可以使用 CSS 属性将图像设置为边框图像。可以使用不同的参数设置边框图像。要设置图像边框的内边距，请在 JavaScript 中使用borderImageSlice 属性。
我们将看到两种使用 JavaScript 设置图像边框内边距的不同方法：
borderImageSlice 属性
setProperty 方法
使用borderImageSlice 属性
图像边框的内边距由 JavaScript 的 borderImageSlice 属性指定。元素对象的 style 对象具有 borderImage 属性。可以使用 document.getElementById() 方法访问元素对象，然后我们可以设置 borderImageSlice 属性。
语法
document.getElementById('el').style.borderImageSlice = number | % | fill | inherit | initial
在以上语法中，使用 document.getElementById() 方法和 borderImageSlice 属性来设置图像边框的内边距。
参数
数字 - 图像边框的内边距，以像素为单位。
% - 图像边框的内边距，以百分比为单位。
填充 - 要显示的边框图像的中间部分。
继承 - 图像边框的内边距继承自其父元素的属性。
初始 - 图像边框的内边距设置为默认值。
示例
在下面的示例中，我们使用 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://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 方法用于通过在其参数中获取属性名称和属性值来设置元素的新属性或现有属性。此方法在元素对象中存在的 style 对象中可用。document.getElementById() 方法用于获取元素对象，以便我们可以执行 setProperty 方法。例如，要设置边框图像的内边距，setProperty 方法将“border-image-slice”作为第一个参数，并在第二个参数中获取值。
语法
document.getElementById('el').style.setProperty(name, value, priority)
在以上语法中，使用 document.getElementById() 方法访问元素对象，以便我们可以对其使用 setProperty 方法。
参数
名称 - 属性的名称。
值 - 属性值。
优先级 - 属性值的优先级（可选）。
示例
在下面的示例中，我们使用 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://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() 方法。
173 次查看
