資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 設定邊框影像區域超出邊框框的範圍？
在本教程中，我們將學習如何在 JavaScript 中設定一個數字，該數字用於確定邊框影像區域超出邊框框的範圍。要設定邊框影像擴充套件的範圍，需要設定邊框外部邊緣。為此，我們可以應用 JavaScript 中提供的 borderImageOutset 樣式屬性。
在為 HTML 元素建立邊框影像區域後，我們可能需要增加該區域。通過了解一種將邊框影像區域增加到超出邊框框的方法，我們可以在不編寫冗長程式碼的情況下進行更改。
使用 borderImageOutset 屬性
borderImageOutset 屬性允許我們設定邊框影像區域擴充套件到的數字。此屬性在 CSS 中也用作“border-image-outset”屬性，並提供類似的輸出。
語法
我們將使用 onclick 函式來更改邊框影像區域。這需要不同的屬性值。我們可以新增 1 到 4 個值。這些值顯示在邊框影像區域的頂部、右側、底部和左側。
如果只新增一個值，則所有邊都將視為相同的值。如果新增三個值，則左側將被視為與右側相同。
let img = document.getElementById("img");
function(){
img.style.borderImageOutset = "1px 2px 1px 2px";
}
演算法
步驟 1 - 在 HTML 文件中建立一個 div 或標籤來設定其邊框影像。
步驟 2 - 在 CSS 檔案中設定邊框影像和寬度。
步驟 3 - 在 HTML 中建立一個按鈕，該按鈕可用於使用 onclick 函式更改邊框影像。
步驟 4 - 使用 document.getElementById() 方法為元素設定一個變數名。
步驟 5 - 為按鈕建立函式，並使用 style.borderImageOutset 屬性設定數字。
示例 1
您可以嘗試執行以下程式碼，以瞭解如何在 JavaScript 中設定邊框影像超出邊框框的範圍。
<!DOCTYPE html> <html> <head> <style> div{ background-color:gray; border: 40px solid; border-image: url('https://tutorialspoint.tw/images/neo4j.png'); border-image-slice: 50; border-image-width: 20px; border-image-width: 1 1 1 1; border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <div id="box"> <p>Demo Text!</p> </div> <button onclick = "display()">Set Border Oustside Edges</button> <script> function display(){ document.getElementById("box").style.borderImageOutset = "5px 10px 20px 15px"; } </script> </body> </html>
示例 2
在這裡，我們在 HTML 中建立了一個元素來設定其邊框影像。然後，我們在 CSS 中設定其邊框和影像規範。在 JavaScript 中，我們使用 document.getElementById() 方法訪問了該元素。
為了設定邊框影像區域擴充套件到的數字，我們在按鈕的 onclick 函式() 中使用了 style.borderImageOutset 屬性。
<html> <head> <style> #boximg{ background-color:gray; border: 30px solid; border-image: url('https://tutorialspoint.tw/images/neo4j.png'); } </style> </head> <body> <h3>Using <i>borderImageOutset"</i> property in JavaScript</h3> <div id = "boximg"> </div> <button onclick = "border()"> Extend Border Image Area </button> <script> let img = document.getElementById("boximg"); function border(){ img.style.borderImageOutset = "2px 2px 70px 5px"; } </script> </body> </html>
示例 3
使用 if、else 語句與 borderImageOutset 屬性
在本例中，我們為輸入區域建立了一個邊框影像。由於每個輸入區域都需要不同的長度，您可以使用 borderImageOutset 屬性和 if 和 else 語句來設定數字，以確保在需要時邊框影像區域擴充套件。
<html> <head> <style> #img{ background-color:gray; border: 40px solid; border-image: url('https://tutorialspoint.tw/images/neo4j.png'); } </style> </head> <body> <div id = "img"> <button onclick = "borderinc()"> Extend </button> <script> let img = document.getElementById("img"); function borderinc(){ var num = 20; if(num > 10) { img.style.borderImageOutset = '10px'; } else { img.style.borderImageOutset = '5px'; } } </script> </body> </html>
上述示例通常用於在 JavaScript 中設定邊框影像區域超出框的範圍的數字。您可以將 borderImageOutset 與其他屬性一起使用，以更改 JavaScript 中元素的樣式。
126 次檢視
