如何使用弹出框输入更改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函数。

在该函数内部，我们通过其id属性获取input并读取其值来获取input的值。

然后像上面的示例一样，使用该值将backgroundColor应用于body

Answer 2

首先创建您的函数，该函数在单击事件后返回显示值。

function changeDisplay{
var value="block";
return value;
 }

然后在点击函数onclick =“ this.parentElement.style.display = changeDisplay（）”;中调用它；

注意：-在概念上更改背景颜色的方法是相同的，但是您需要将此功能添加到另一个事件中，例如输入文本中的文本更改或选择框中的选择选项，或者您希望在脚本或网页中使用的方法