Ändern CSS-Eigenschaft in regelmäßigen Abständen und fügen Sie diesen Wert als Text in ein div

Question

Ich möchte die CSS-Eigenschaft "Farbe" von div #prueba alle 0,5 Sekunden zwischen Wert "blau" und "grün" ändern und fügen Sie diesen Wert hinzu die vorhandene div # value, aber ich weiß nicht, wie es geht, ich möchte es auch in jedem Browser ausführen.

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>

Verwenden Sie die 'setInterval' Funktion

Answer 2

können Sie setInterval() verwenden.

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{ 
 
\t color:red; 
 
\t background:grey; 
 
\t display:inline; 
 
\t }

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