数据结构
网络
关系数据库管理系统 (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+ 次浏览
