使用按钮 javascript 更改某物的颜色答案

【问题标题】：Changing the colour of something using button java script使用按钮 javascript 更改某物的颜色
【发布时间】：2014-12-03 13:37:21
【问题描述】：

我想使用红色和蓝色按钮将时钟的颜色更改为红色和蓝色，但由于某种原因无法正常工作。如果有人可以查看我的代码并帮助我，那就太好了。我在 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;
}

【问题讨论】：

标签： javascript html css colors clock

【解决方案1】：

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

你可以这样修复它：

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

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

【讨论】：

小提琴中的颜色是向后的。只需在 JavaScript 中更改 redtext 和 bluetext 类名。 :)

【解决方案2】：

以这种方式更改这些方法

如果你想改变背景颜色使用这个

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

【讨论】：

好吧，如果我的回答对您有所帮助而不是接受答案，它将帮助人们找到正确的答案。谢谢

【解决方案3】：

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

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>

附言脚本最好在 HTML 之后让整个页面先呈现

【讨论】：