style.border属性用于改变元素的边框，它返回元素的三个border-bottom属性，即border-color、border-style和border-width 。它是 HTML 样式对象属性之一。
我们使用 onchange 事件使更改在填写框后生效。 onchange 是 JavaScript 属性之一，当 HTML 元素的值发生更改时就会发生。当选中状态更改时，它还可以与单选按钮和复选框一起使用。
onchange 事件还可以与
在本文中，我们将了解如何在使用 JavaScript 填充输入框后更改输入框边框。
立即学习“Java免费学习笔记（深入）”；
语法
以下是 style.border 属性的语法，用于在填充框后更改输入框边框 -
object.style.border = "width style color|initial|inherit"
参数
width – 用于设置边框宽度。我们可以将宽度值传递为“厚”、“薄”、“中”或以 px 为单位的值（即 10px）。
style – 用于设置边框样式。我们可以将样式值传递为“solid”、“dotted”、“double”等。
color – 用于设置边框颜色。
initial – 用于将属性设置为默认值。
inherit – 用于从父元素继承属性。
返回值
样式边框返回一个字符串值，该值代表元素边框的颜色、宽度和样式。
步骤
填充框后，我们应该按照以下给出的步骤更改输入框边框 -
第 1 步 - 定义表单元素，其中包含文本和按钮类型的输入字段。
步骤 2 - 脚本代码定义了填充框后更改输入框边框的功能。
第 3 步 - 在 JavaScript 部分中，声明了 onchange 事件，该事件在元素的值更改时发生。
步骤 4 - style.border 是 HTML DOM 背景属性，用于更改底部边框的元素。
步骤 5 - 每当用户向输入值添加一些值时，就会触发 onchange 事件，并且当触发该事件时，该值会检查它是否为 null。如果该值存在且不为空，则边框底部将更改为绿色点线。
示例
在下面的示例中，我们使用 JavaScript 将第一个输入框填充后的边框更改为“10px 纯绿色”，将第二个输入框边框更改为“3px 点状红色”。
Changing the Borders of Input Box after filling the Box
示例
仅更改输入框的下边框
在本例中，我们使用样式 borderBottom 属性来更改输入框的下边框。为了使更改生效，我们使用 onchange 事件属性。
Changing the bottom border of Input Box after filling the box
结论
在本文中，我们通过示例演示了如何在填充输入框后更改输入框的边框。我们已经看到了棕褐色的示例，每当我们在两个输入字段中输入文本时，底部边框就会更改为绿色。如果两个输入字段中的值为空，则颜色不会改变，只有当该值存在时才会改变。
