如何获取input的值并将其设置为盒子的背景颜色？

1. 获取input元素的值 #

获取到input DOM元素后，直接访问它的value属性就能拿到输入框中的内容。比如示例里的typeColor是选中的input元素，用typeColor.value即可获取用户输入的颜色值。

2. 设置div的背景颜色为input的值 #

先通过document.getElementById()分别选中目标div（id为box）和input元素，然后在触发函数中，将input的value值赋值给div的style.backgroundColor属性。

修正后的完整代码 #

HTML

<input id="typeColor" placeholder="输入颜色...">
<button onclick="changeBoxColor()">更改盒子颜色</button>
<div id="box"></div>

CSS

body {
  margin: 0px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin-left: 100px;
  margin-top: 50px;
}

JavaScript

const box = document.getElementById("box");
const typeColor = document.getElementById("typeColor");

function changeBoxColor() {
  // 这里要取input的value属性，而不是直接用元素本身
  box.style.backgroundColor = typeColor.value;
}

内容的提问来源于stack exchange，提问作者sewqq