如何使用 Javascript 更改背景颜色 CSS？答案

【问题标题】：How do I change the background-color CSS with Javascript?如何使用 Javascript 更改背景颜色 CSS？
【发布时间】：2017-08-15 14:24:07
【问题描述】：

我想通过使用带有 JavaScript 的按钮来更改我的 CSS 代码中的 background-color。我尝试过诸如

之类的东西

document.getElementByID("").style.background = colour。这不起作用，大概是因为我选择的是 HTML 元素而不是存储 CSS 信息的 ID。我也试过 jQuery。我试过$("#traffic_light").css("background-color", "green")。

这也不起作用，但可能是因为我在开始时没有使用正确的选择器。如果有人知道为 ID 选择 CSS 样式的选择器，请告诉我。无论如何，这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>

        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>
        <button type="button" onclick="colour_change()">Change Lights</button>

        <script>
            var colour = ["green", "orange", "red"];
            var i = 0;
            document.getElementByID("traffic_light").style.background = colour[i];

            function colour_change() {
                i++;
                document.getElementByID("traffic_light").style.background = colour[i];
            };
        </script>
    </body>
</html>

【问题讨论】：

你应该使用.background而不是.backgroundColor。
这只是一个错字。是getElementById（小写d），不是getElementByID；资本化问题。 Web 开发的第一条规则：始终在控制台中查找错误。 “这不起作用，大概是因为我选择的是 HTML 元素而不是 ID” 不，您选择的是元素，而不是它的 ID。
有一个错字。 getElementById 与 getElementByID Demo 不同
How do I change the background color with JavaScript?的可能重复

标签： javascript jquery html css styles

【解决方案1】：

您的代码中有错字。代替document.getElementByID()，使用document.getElementById()。

除此之外，您可以使用此条件在每次点击时更改背景颜色-

    var colour = ["green", "orange", "red"];
    var i = 0;
    document.getElementById("traffic_light").style.background = colour[i];

    function colour_change() {
        i++;
        i = i<colour.length ? i :  0;
        document.getElementById("traffic_light").style.background = colour[i];
    };

而在 HTML-

    <div id="traffic_light"></div>
    <button type="button" onclick="colour_change()">Change Lights</button>

【讨论】：

【解决方案2】：

<script>
function colour_change() {

document.getElementById("traffic_light").style.backgroundColor = colour[i]; 
}
</script>

<button type="button" onclick="colour_change()">Change Lights</button>

很好，demo brk 和 angnima 回答了错字

【讨论】：

【解决方案3】：

这会起作用

<!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>


        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>

        <button type="button" onclick="colour_change()">Change Lights</button>

        <script>

            var i = 0;

    var colour_change = function(){

    var colour = ["green", "orange", "red"];
        if(i==colour.length)
            {
                i=0;
            }
       document.getElementById("traffic_light").style.backgroundColor = colour[i];
        i= i+1;

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

【讨论】：

【解决方案4】：

哎呀。我一直以为是.getElementByID。显然不是。谢谢大家:)

【讨论】：

【解决方案5】：

在jquery中

    <!DOCTYPE html>
<html>
    <head>
        <title>Traffic Lights</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>


        <style type="text/css">
            #traffic_light { 
                width:200px;
                height:200px;
                padding:10px 11px;
                margin:0 auto;
                border:2px solid #a1a1a1;
                border-radius:150px;
                background-color:green;
            }
        </style>

        <div id="traffic_light"></div>

        <button type="button" id="change">Change Lights</button>

        <script>

            var colour = ["green", "orange", "red"];
            var i = 0;
            $('#change').click(function() {
                 if(i==colour.length-1)
                   i=0;
                 else
                   i++;
                $('#traffic_light').css('background-color', colour[i]);

            });

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

【讨论】：

【解决方案6】：

检查此链接希望它对您有用：http://www.java2s.com/Tutorial/JavaScript/0440__Style/divstylebackgroundColor00f.htm

【讨论】：

【解决方案7】：

document.getElementById("traffic_light").style.backgroundColor = colour[i];

【讨论】：