資料結構
網路
關係型資料庫管理系統
作業系統
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 屬性來設定影像邊框的內邊距。
引數
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://tutorialspoint.tw/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 方法。
引數
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://tutorialspoint.tw/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 次瀏覽
