資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 更改輸入框填充後的邊框？
`style.border` 屬性用於更改元素的邊框，它返回元素的三個底部邊框屬性，即邊框顏色、邊框樣式和邊框寬度。它是 HTML 樣式物件屬性之一。
我們使用 `onchange` 事件使更改在填充框後生效。`onchange` 是 JavaScript 屬性之一，當 HTML 元素的值更改時發生。它也適用於單選按鈕和複選框，當選中狀態更改時。
`onchange` 事件也可以與 `
在本文中，我們將瞭解如何使用 JavaScript 更改輸入框填充後的邊框。
語法
以下是更改填充框後輸入框邊框的 `style.border` 屬性的語法：
object.style.border = "width style color|initial|inherit"
引數
width – 用於設定邊框寬度。我們可以將寬度值設定為 'thick'、'thin'、'medium' 或 px 值（例如：10px）。
style – 用於設定邊框樣式。我們可以將樣式值設定為 'solid'、'dotted'、'double' 等。
color – 用於設定邊框顏色。
initial – 用於將屬性設定為預設值。
inherit – 用於從父元素繼承屬性。
返回值
`style.border` 返回一個字串值，表示元素邊框的顏色、寬度和樣式。
步驟
我們應該遵循以下步驟來更改填充框後的輸入框邊框：
步驟 1 - 定義包含文字和按鈕型別輸入欄位的表單元素。
步驟 2 - 定義指令碼程式碼，其中包含更改填充框後輸入框邊框的功能。
步驟 3 - 在 JavaScript 部分，宣告 `onchange` 事件，該事件在元素值更改時發生。
步驟 4 - `style.border` 是 HTML DOM 背景屬性，用於更改元素的底部邊框。
步驟 5 - 每當使用者向輸入值新增某些值時，都會觸發 `onchange` 事件，並且當事件被觸發時，該值會檢查它是否為空。如果存在值且不為空，則底部邊框將更改為點狀綠色。
示例
在下面的示例中，我們使用 JavaScript 將第一個輸入框填充後的邊框更改為“10px solid green”，並將第二個輸入框的邊框更改為“3px dotted red”。
<html>
<body style="text-align: center;">
<h2>Changing the Borders of Input Box after filling the Box</h2>
<!--defining the form-->
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.border = "10px solid green";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.border = "3px dotted red";
}
};
</script>
</body>
</html>
示例
僅更改輸入框的底部邊框
在此示例中，我們使用 `style.borderBottom` 屬性來更改輸入框的底部邊框。為了使更改生效，我們使用 `onchange` 事件屬性。
<html>
<body style="text-align: center;">
<h2>Changing the bottom border of Input Box after filling the box</h2>
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.borderBottom = "thick solid #00ff00";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.borderBottom = "3px dotted green";
}
};
</script>
</body>
</html>
結論
在本文中，我們演示瞭如何更改填充框後輸入框的邊框以及示例。我們看到一個示例，其中每當我們在兩個輸入欄位中輸入文字時，底部邊框都會更改為綠色。如果兩個輸入欄位中的值為空，則顏色不會更改，只有在值存在時才會更改。
2K+ 次瀏覽
