使用 JavaScript 填充框后如何更改输入框边框？

在某些情况下，我们可能需要使用 JavaScript 动态填充输入框的值。这时候，我们可能需要改变其边框的样式。那么如何实现呢？

方法一：使用内联样式

我们可以通过修改输入框的 style 属性，来改变其边框的样式。例如：

<input type="text" id="myInput" value="Hello World" />

<script>
  document.getElementById('myInput').style.border = '2px solid red';
</script>

这段代码会将 id 为 myInput 的输入框的边框改为红色实线，宽度为 2 像素。

方法二：为输入框添加类名

我们也可以为输入框添加一个类名，然后在 CSS 中定义该类名的样式，来改变其边框的样式。例如：

<input type="text" id="myInput" class="my-input" value="Hello World" />

<style>
  .my-input {
    border: 2px solid red;
  }
</style>

这段代码会将 id 为 myInput 的输入框的边框改为红色实线，宽度为 2 像素。

方法三：使用 JavaScript 修改 CSS 类名

我们还可以使用 JavaScript 修改输入框的类名，来改变其边框的样式。例如：

<input type="text" id="myInput" value="Hello World" />

<style>
  .my-input {
    border: 2px solid red;
  }
</style>

<script>
  document.getElementById('myInput').classList.add('my-input');
</script>

这段代码会将 id 为 myInput 的输入框的类名改为 my-input，从而改变其边框的样式。

以上三种方法都可以实现改变输入框边框样式的效果，具体使用取决于实际情况。这里我们提供了多种选择，开发者可以根据自身需求选择适合的方法。