如何创建一个可以改变背景颜色的按钮答案

【问题标题】：How to create a button that will change background color如何创建一个可以改变背景颜色的按钮
【发布时间】：2020-03-28 08:59:37
【问题描述】：

我需要帮助编写 HTML 代码。我尝试了许多不同的方法来编码这个按钮。该按钮现在在网页上，但不会更改网页的背景颜色。

     <html>
     <body>

     <button type="button" onclick="myFunction()"> Blue</button>

    <script>

    function myFunction(){
    document.getElementByld("background").sytlecolor="blue";

    </script>
    </body>
    </html>

【问题讨论】：

欢迎来到 Stack Overflow！
这能回答你的问题吗？ javascript change background color on click
这个问题在 Stackoverflow 上已经有了答案，首先你应该在 Stackoverflow 上谷歌或搜索这里，然后在这里发布一个问题。
这能回答你的问题吗？ Changing button color programmatically

标签： javascript html

【解决方案1】：

我建议你通过Javascript DOM 和HTML

function myFunction(){
  document.getElementsByTagName("body")[0].style.background="blue";   
}

<html>
<body>
  <button type="button" onclick="myFunction()"> Blue</button>
</body>
</html>

【讨论】：

【解决方案2】：

在你的函数中试试这个

function myFunction(){
    document.body.style.background = "blue";
}

【讨论】：

【解决方案3】：

试试这个：

var isBlue = false;

document.querySelector("button").addEventListener("click", function(){
    if(isPurple){
        document.body.style.background= "white";
    } 
    else{
        document.body.style.background= "blue";
    }
    isBlue = !isBlue
})

这不仅会改变背景颜色，还会创建一个切换它的按钮。

【讨论】：

【解决方案4】：

这里有两个错误：

您正在按 id 选择一个元素，但该元素在您的 html 中不存在。
您的 javascript 有一个 sintax 错误。（函数中缺少右括号。
您正在使用不存在的属性sytlecolor（style 上有错字，即使这样，stylecolor 也不存在。请改用style.backgroundColor。

这是一个工作示例：

<html>
<body id="background">

<button type="button" onclick="myFunction()"> Blue</button>

<script>
    function myFunction(){
        document.getElementByld("background").style.backgroundColor = "blue";
    }
</script>
</body>
</html>

另外如果你想改变body背景颜色，你不需要在上面加上id：

<html>
<body>

<button type="button" onclick="myFunction()"> Blue</button>

<script>
    function myFunction(){
        document.body.style.backgroundColor = "blue";
    }
</script>
</body>
</html>

【讨论】：

【解决方案5】：

试试这个

<body>

<button type="button" onclick="myFunction()">Click to change color</button>

<script>
function myFunction(){
    document.body.style.background = "aqua";
}
</script>
</body>
</html>```

background is not a document object. It is an html dom object.

【讨论】：

【解决方案6】：

在 HTML 正文中添加这一行

<a onclick="changecolor('navy')" id="navy">#0E2A36</a>

您可以在 CSS 中添加自定义颜色，例如

#navy{
    background:#0E2A36;
}

然后添加 JavaScript

<script type="text/javascript">
    function changecolor(id) {
       document.body.style.background = document.getElementById(id).innerHTML;
    }
</script>

【讨论】：

【解决方案7】：

拼写错误很少，但这应该可以解释

1.使元素成为变量。 2. 使用 .style.background = "blue" 设置该变量

拼写错误：

sytle = 风格
getElementByld = getElementById

<html>
  <body>
    <div id="background">
      <button type="button" onclick="myFunction()">Blue</button>
    </div>
    <script>
      function myFunction() {
        //get the element
        const background = document.getElementById("background");
        // set it to blue
        background.style.background = "blue";
      }
    </script>
  </body>
</html>

希望这会有所帮助。

【讨论】：

【解决方案8】：

添加您要更改其背景的特定元素的id

document.getElementsByTagName('body')[0].style.background='green'

<html>
<body>
  <button type="button" 
  onclick="document.getElementsByTagName('body')[0].style.background='green'">
  Click for green backgournd
  </button>
  <br />
  <br /><br />
  
  Another way to do from text box Just for your reference
  <br />
  <input style="width:100%" type="text" id="txtColorBox" placeholder="enter color name and click button"/>
  <br/>
  <button type="button" 
  onclick="document.getElementsByTagName('body')[0].style.background=document.getElementById('txtColorBox').value">
  Click for green backgournd
  </button>
</body>
</html>

【讨论】：

【解决方案9】：

我去

//On top goes the head
<button type="button">Blue</button>

然后我会创建一个 JS 文件

var button=document.querySelector('button'),
    body  =document.querySelector('body');

button.addEventListener('click',function(){
  body.style.backgroundColor="blue";
});

这应该把背景变成蓝色。

【讨论】：

【解决方案10】：

vanilla javascript 有两种方法，第二种是 jQuery。

在您的情况下，您没有使用 jQuery。所以解决方案是 vanilla javascript。

function myFunction(element) {
  element.style.backgroundColor="green";
}

<button type="button" onclick="myFunction()"> Blue</button> //Change web bg

如果您需要更改按钮背景。传递当前指针。

<button type="button" onclick="myFunction(this)"> Blue</button> //Change buttion bg

bg => background

【讨论】：

【解决方案11】：

您好，您可以这样做：

document.getElementById('buttonColor').addEventListener('click', () => 
    document.body.style.backgroundColor = "blue"
);

<html>
<body>
    <button id="buttonColor">Change Color</button>
</body>
</html>

【讨论】：