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

我会这样做。

更改用户输入的颜色

＆＃13;

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

＆＃13;

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

＆＃13;

工作原理：

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

输入在调用函数时也会自动发送元素作为参数。因此，在我的changeColor函数中，我可以访问触发它的元素。

在函数内部，我阅读了输入的value，然后选择页面的body并将其设置为backgroundColor作为输入的值。< / p>

或使用按钮

或者你可以像你问的那样使用按钮。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

工作原理：

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

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

然后我使用该值将backgroundColor应用于body，就像我在上面的示例中所做的那样

Answer 2

首先创建一个函数，在单击事件后返回显示值。

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

然后在点击功能中调用它的onclick =＆＃34; this.parentElement.style.display = changeDisplay（）＆＃34 ;;

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

如何使用弹出框输入来改变CSS（背景颜色）

2 个答案:

更改用户输入的颜色

工作原理：

或使用按钮

工作原理：