javascript - 如何使用弹出框输入更改CSS(背景颜色)

Question

我有一个关于 JavaScript 和 CSS 的快速问题。

我想要一个允许您输入颜色(CSS 可识别的任何主要原色)的弹出框。用户输入颜色后，我希望它能更改外部样式表中的 body 元素以更改页面的背景颜色。我知道我需要在 CSS 中使用这些属性的组合，但我不确定如何将它与外部 CSS 相关联的语法以及此处组合的正确方法。

来自 W3Schools:

function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
}
}

同样来自 W3Schools:

onclick="this.parentElement.style.display='none';"

现在，我想我的主要问题是如何处理它所说的“display='none';”实际获取弹出框的输入并将其插入 onclick 以实现我的目标(它会像 this.parentElement.style.backgroundcolor='"+ usercolorinput + "';")

提前致谢。

Answer 1

这是我的做法。

改变用户输入的颜色

function changeColor(element) {
  document.body.style.backgroundColor = element.value;
}

<h4> Type #333, or pink below </h4>
<input oninput="changeColor(this)"/>

工作原理:

<input-element>可以根据您的输入触发许多事件。在这种情况下，我使用了 oninput事件，每次您在 <input> 中键入内容时都会触发该事件, 调用一个名为 changeColor 的函数.

在调用函数时，输入还会将元素本身作为参数发送。因此在我的changeColor函数，我可以访问触发它的元素。

在函数内部，我读取了 value输入的，然后选择 body并将其设置为 backgroundColor作为输入的值。

或者使用按钮

或者您可以像您要​​求的那样使用按钮。

function changeColor() {
  // get the input element value
  var inputValue = document.getElementById("colorInput").value;
  
  // apply the value as a backgroundColor on body
  document.body.style.backgroundColor = inputValue;
}

<h4> Type #333, or pink below and press "Change color" </h4>
<input id="colorInput"/>
<button onclick="changeColor()"> Change color </button>

工作原理:

在这种情况下 changeColor单击按钮调用函数。

在该函数中，我们通过获取 input 来获取输入值通过它的 id属性并读取它的值。

然后我使用该值来应用 backgroundColor到 body正如我在上面的例子中所做的那样