javascript - 如何根据值更改所需表单输入的 CSS 样式

Question

我想知道如何编写 javascript 来改变所需的表单元素的样式；并在它们具有值(value)时更改它们。

我想要做的是在必填文本字段为空白时在其周围添加彩色边框，并在它们具有值时移除边框样式。

我想做的是编写一个 javascript 函数来检查值是否为空并设置适当的样式:

function requiredElement(id) {
  var Input = document.getElementById(id);
  if(Input.value==null) {
    Input.style.border = '2px solid #FF0000';
  }
}

但我坚持的是当用户在这些必填字段中输入/删除字符时更改样式，并为这些字段调用函数。

我有一个简单的 html 表单，每个输入都有一个唯一的 ID。

Answer 1

使用jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

然后添加这段代码:

$('.important').change(function() {
  if(($(this).val()) != '') $(this).css( 'border-width', '0' );
  else  $(this).css( 'border-width', '2' );
});

假设你在 css 中添加了边框

.important
{
    border-style:solid;
    border-width:2px;
    border-color:red;
}