jumbotron Farbmanipulation mit Javascript

Question

Ich habe ein Problem mit Javascript.Ich möchte die Jumbotronfarbe steuern und setze es alle 3 Sekunden auf eine zufällige. Das Problem hier ist, dass ich nicht weiß, wie man CSS mit JavaScript zu manipulieren, wie ich ziemlich neu in Javascript bin. Ich sah einige andere Lösungen und einige andere Threads, aber es hat nicht funktioniert. (Ich weiß nicht, ob ich etwas falsch gemacht habe). Ich habe gerade keinen js-Code geschrieben, da ich alles gelöscht habe, was nicht funktioniert hat.

.jumbotron { 
    background-color: #f14444 !important; 
} 
/*Without the !important rule it won't change color!*/ 

Wenn Sie irgendwelche Themen, die Sie ich glaube, ich wäre nicht überprüft haben, glücklich, sie zu prüfen, aber sicher genug, um im, zu sagen, dass ich sie schon gesehen habe.
Danke für Ihre Zeit sowieso!

Answer 1

die Hintergrundfarbe zu ändern, einfach das Element auswählen und die legen Sie die Eigenschaft:

setTimeout(() => { 
 
    document.querySelector('.jumbotron').style.backgroundColor = '#f14444'; 
 
}, 1000);

.jumbotron { 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: black; 
 
}

<div class="jumbotron"></div>

Beachten Sie, dass mit der gegebenen Klasse wählt über das erste gefundene Element, wenn Sie also Sie müssen ein bestimmtes Element auswählen, es als id betrachten und es als @Phil anzeigen.

Answer 2

Html Elemente im DOM haben eine style Eigenschaft.

document.getElementById('something').style.backgroundColor = '#ccc' 

Beachten Sie, dass hyphenated Eigenschaften wie background-color in CSS sind in der Regel Kamel-Fall (Backgroundcolor) in Javascript.

Answer 3

Sie können auch sie erreichen mit keyframe animation

Hier ist ein tutorial wie zufällige Farbe auf, dass hier

@-webkit-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@-moz-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
@-ms-keyframes changeColors { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: green; 
 
    } 
 
} 
 

 
.jumbotron { 
 
    -webkit-animation: changeColors 3s infinite; 
 
    -moz-animation: changeColors 3s infinite; 
 
    -ms-animation: changeColors 3s infinite; 
 
    background-color: #f14444; 
 
}

<div class="jumbotron"> 
 
    Some text here 
 
</div>