Изменение цвета чего-либо с помощью кнопки java script

Я хочу изменить цвет своих часов на красный и синий, используя красные и синие кнопки, но по какой-то причине он не работает. Если кто-то может взглянуть на мой код и дать мне руку, было бы здорово. Я искал айнсера на YouTube и Google и пришел к выводу, что нет.

HTML:

<title> Clock II & III </title>
 
 
 
 
 <div id="clockdisplay"> 
 22:23PM
 </div>
 <button onclick="reveal()"> Red </button>
 <button onclick="hide()"> Blue </button>

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;
}
3 ответа

Измените эти методы таким образом

Если вы хотите изменить цвет фона, используйте этот

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

Если вы хотите, чтобы цвет текста chagne использовал этот

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


Проблема в том, что стили, определенные для #clockdisplay, имеют более высокий приоритет, чем те, которые установлены для классов .bluetext и .redtext. поэтому цвет color: #0FF; всегда применяется даже при добавлении классов.

Вы можете исправить это следующим образом:

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

Демо: http://jsfiddle.net/j2r8ksa2/


Я сделал это на днях, но для изменения цвета текста. вот моя функция

function changeTextColor(){
 document.getElementById("textColour").style.color = "#F00";
}

и html:

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

p.s. script лучше всего пойти за HTML, чтобы первая страница отображалась в первую очередь

licensed under cc by-sa 3.0 with attribution.