資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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 函式來更改邊框影像區域。這需要不同的屬性值。我們可以新增一個到四個值。這些值顯示在邊框影像區域的頂部、右側、底部和左側。
如果您只新增一個值，則它將被認為對所有邊都相同。如果您新增三個值，則左側將被視為與右側相同。
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 次瀏覽
