Javascript简单改变表单元素背景的方法

下面是Javascript简单改变表单元素背景的方法的完整攻略：

1. 选择表单元素

首先，你需要选取需要改变背景的表单元素。可以使用文档对象模型（DOM）通过ID、类名或标签名等属性选择器获取指定的表单元素。

例如，如果有一个输入框的ID为"input-box"，则可以使用以下代码选择该元素：

var inputBox = document.getElementById("input-box");

2. 改变背景颜色

一旦选择了表单元素，就可以开始改变该元素的背景颜色。可以使用元素的style属性来直接设置背景颜色。

例如，如果要把输入框的背景改为红色，则可以使用以下代码：

inputBox.style.backgroundColor = "red";

或者，如果想让输入框的背景随机变化，可以使用以下代码：

var randomColor = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
inputBox.style.backgroundColor = randomColor;

这将根据一个随机生成的十六进制颜色码来设置输入框的背景颜色。

示例说明

以下是两个示例，展示了如何使用Javascript简单改变表单元素背景。

示例一：使用按钮控制输入框背景颜色

HTML代码：

<input type="text" id="input-box">
<button id="change-button">改变背景颜色</button>

Javascript代码：

var inputBox = document.getElementById("input-box");
var changeButton = document.getElementById("change-button");

changeButton.addEventListener("click", function() {
  var randomColor = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
  inputBox.style.backgroundColor = randomColor;
});

这段代码会给“改变背景颜色”按钮添加一个点击事件监听器，每次点击时会生成一个随机颜色，并把该颜色设置为输入框的背景颜色。

示例二：根据输入内容改变背景颜色

HTML代码：

<input type="text" id="input-box">

Javascript代码：

var inputBox = document.getElementById("input-box");

inputBox.addEventListener("input", function() {
  var inputValue = inputBox.value;
  var colorValue = inputValue.length * 10;

  inputBox.style.backgroundColor = "rgb(" + colorValue + ", 255, 255)";
});

这段代码会给输入框添加一个输入事件监听器，每次输入时会根据输入内容的长度计算出一个数字，并将该数字作为颜色设置为输入框的背景颜色。数字越大，颜色越青色。这样做可以让输入框背景色随输入内容动态变化。