定期更改css屬性並將此值作為文本添加到div中

Question

我希望div #prueba的css屬性“color”在值“blue”和“green”之間每0.5秒更改一次，並將此值添加到現有div #value中，但我不知道該怎么做，我也喜歡它在任何瀏覽器中運行。

 body { text-align: center; margin: 0; padding: 0; } #prueba { color: red; background: grey; display: inline; } 

 <div id="#value"></div> <div id="prueba"> ABCDE </div> 

Answer 1

 setInterval(changeColor, 500) function changeColor() { var prueba = document.getElementById('prueba'); if (prueba.style.color === 'blue') { prueba.style.color = 'green'; } else { prueba.style.color = 'blue'; } document.getElementById('value').innerHTML = prueba.style.color; } 

 body { text-align: center; margin: 0; padding: 0; } #prueba { color: red; background: grey; display: inline; } 

 <div id="value">&nbsp;</div> <div id="prueba"> ABCDE </div> 

使用'setInterval'函數

Answer 2

您可以使用setInterval() 。

 setInterval(function(){ var color = document.getElementById('prueba').style.color; // get current color var nextcolor = color === "green" ? "blue" : "green"; // decide what color should be next document.getElementById('prueba').style.color = nextcolor ; // apply to div document.getElementById('value').innerHTML = nextcolor +'<br />'; // display the color in 'value' div }, 500); //500 milliseconds == 0.5 seconds 

 body{text-align:center; margin:0; padding:0;} #prueba{ color:red; background:grey; display:inline; } 

 <div id="value"> </div> <div id="prueba"> ABCDE </div>