Question

我想通过使用带有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>

Answer 1

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

Answer 2

点击此链接，希望它适合您：A Guide to Styling an Ionic 2 Application

Answer 3

<script>
function colour_change() {

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

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

很棒，这是由演员brk和angnima回答的拼写错误

Answer 4

在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>

Answer 5

糟糕。我一直以为它是 .getElementByID 。显然不是。谢谢大家：）

Answer 6

这将有效

<!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>

Answer 7

您的代码中存在拼写错误。而不是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>

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

7 个答案: