javascript - 如何使用带有 HTML 的 JavaScript 根据颜色 <input> 更改特定 的背景？

Question

问:我正在尝试通过 JS 专门将 div 更改为选定的颜色，而不是整个 body

当使用 JS 来利用输入并根据用户决定的颜色更改背景时，我看到/可以工作的唯一代码行是 document.body.style.backgroundColor = color;

有没有办法，比如 document.(classNameForADiv).style.backgroundColor = color;？我对 HTML、CSS 和 JS 非常陌生，因此我们将不胜感激。

HTML:

         <div class="cell text">
            Background Color Picker:
        </div>
        <div class="cell js">
            <input type="color" id="color_value" name="color_value" value="Black">
            <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
            <button class="button two" type="button" onclick="changeBackground()">
                Set Color:
            </button>
        </div>

JS:

function changeBackground(){
  let color = document.getElementById('color_value').value;
  document.body.style.backgroundColor = color;
}

这会改变整个 Body 标签的背景，而我正在寻找一种解决方案来改变 Div 标签的背景。

Answer 1

您必须选择特定的分区才能更改分区颜色。

function changeBackground(){
  let color = document.getElementById('color_value').value;
  let division = document.getElementById("cell_text");
  division.style.backgroundColor = color;
}

<div class="cell text" id = "cell_text">
    Background Color Picker:
</div>
<br>
<div class="cell js">
   <input type="color" id="color_value" name="color_value" value="Black">
   <!---DOUBLE (1 COLOR BOX 1 BUTTON)-->
   <button class="button two" type="button" onclick="changeBackground()">
        Set Color:
   </button>
</div>