Question

我想使用红色和蓝色按钮将时钟的颜色更改为红色和蓝色，但由于某种原因它不起作用。如果有人可以看看我的代码，并给我一个手，这将是伟大的。我已经在youtube和google上查找了awnser并且无济于事。

HTML：

<html>
    <head>
        <title>    Clock II & III   </title>
        <link rel="stylesheet" type="text/css" href="clock.css">
        <script type = "text/javascript">
            var x = 0;

            function renderTime() {
                var currentTime = new Date();
                var diem = "AM"
                var h = currentTime.getHours();
                var m = currentTime.getMinutes();
                var s = currentTime.getSeconds();

                if (h == 0) {
                    h = 12
                } else if (h > 12) {
                    h = h - 12;
                    diem = "PM";
                }

                if (h < 10) {
                    h = "0" + h;
                }

                if (m < 10) {
                    m = "0" + m;
                }

                if (s < 10) {
                    s = "0" + s;
                }


                var myClock = document.getElementById('clockdisplay')
                myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
            }


            window.onload = function() {
                renderTime();
                setInterval(renderTime, 1000);
            };

            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function() {
                    document.getElementById("Content").style.backgroundColor = getComputedStyle(this).backgroundColor;
                }
            }

            function reveal() {
                document.getElementById('clockdisplay').className = 'bluetext';
            }

            function hide() {
                document.getElementById('clockdisplay').className = 'redtext';
            }
        </script>
    </head>
    <body>
        <div id = "clockdisplay" class = "clockStyle">      
            22:23PM
        </div>
        <button class = "Btnred" onclick = "reveal()"> Red </button>
        <button class = "Btnblue" onclick = "hide()"> Blue </button>
    <body>
</html>

CSS：

#clockdisplay {
    background-color:#000;
    border:#999 2px inset;
    padding:6px;
    color:#0FF;
    font-family:"Ariel Black", Gadget, sans-serif;
    font-size:16px;
    font-weight:bold;
    letter-spacing:2px;
    display:inline;
}

.bluetext {
    color:blue;
}

.redtext {
    color:red;
}

Answer 1

问题是为#clockdisplay定义的样式优先于为.bluetext和.redtext类设置的样式。因此，即使添加类，也始终应用颜色color: #0FF;。

你可以这样解决：

#clockdisplay.bluetext {
    color: blue;
}
#clockdisplay.redtext {
    color: red;
}

演示：http://jsfiddle.net/j2r8ksa2/

Answer 2

我前几天做了这个，但改变了文字颜色。这是我的功能

function changeTextColor(){

    document.getElementById("textColour").style.color = "#F00";

}

和html：

<button type="button" onclick="changeTextColor()">Will do as says</button> <br>
<p id="textColour">This text will change color</p>
</form>

P.S。脚本最好用HTML来让整个页面首先呈现

Answer 3

以这种方式更改这些方法

如果您想要更改背景颜色，请使用此

  function reveal() {
            document.getElementById('clockdisplay').style.backgroundColor = "red";
        }

        function hide(){
            document.getElementById('clockdisplay').style.backgroundColor = "blue";
        }

如果您想更改文字颜色，请使用此

 function reveal() {
        document.getElementById('clockdisplay').style.color = "red";
    }

    function hide(){
        document.getElementById('clockdisplay').style.color = "blue";
    }

使用按钮javascript更改某些内容的颜色

3 个答案:

演示：http://jsfiddle.net/j2r8ksa2/