Cambiare il CSS di un div con classname usando JavaScript

Voglio cambiare l’attributo di animazione della mia class CSS con una funzione JavaScript. Ho provato vari metodi ma nessuno di loro ha funzionato. Per favore, scopri dove sto sbagliando.

CSS:

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border-radius: 50%; background: transparent; } .center .earth { position: absolute; top: 0; width: 200px; height: 200px; background-image: url(http://sofit.miximages.com/javascript/earth-map.jpg); margin: 3em auto; border-radius: 50%; background-size: 630px; animation: spin 30s linear alternate infinite; box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1); color: #000; } .center .earth .moon { position: absolute; top: calc(50% - 1px); left: 50%; width: 200px; height: 2px; transform-origin: left; border-radius: 50%; animation: rotate 10s linear infinite; } .center .earth .moon::before { content: ''; background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g); position: absolute; background-size: 200px; top: -25px; right: 0; width: 50px; height: 50px; border-radius: 50%; animation: spin 10s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 100% { background-position: 100%; } } 

HTML:

 

Funzione JavaScript:

  function change() { var elem = document.getElementsByClassName('moon'); elem.style.animation="rotate 5s linear infinite"; } 

Ho provato vari metodi ma nessuno di loro è in grado di eseguire la modifica. Anche il looping dell’object non è stato d’aiuto.

elem è un HTMLCollection di elementi, non un singolo elemento, e l’impostazione della proprietà di style di HTMLCollection non funziona.

Invece, ti consigliamo di cambiare lo stile per ogni elemento singolarmente:

 Array.from(document.getElementsByClassName('moon')).forEach(elem => { elem.style.animationDuration = "5s"; }); 

MODIFICARE:

Ecco uno snippet per mostrare che il metodo funziona / fornire un riferimento:

 function change_spin_rate() { Array.from(document.getElementsByClassName('spinner')).forEach(elem => { elem.style.animationDuration = "1s"; }); } document.getElementById("spin_change").onclick = change_spin_rate; 
 @keyframes spin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .spinner { display: inline-block; animation: spin 4s infinite linear; } #spin_change { padding: 8px 16px; display: inline-block; font-family: sans-serif; cursor: pointer; border-radius: 16px; } #spin_change:hover { background: rgba(0, 64, 255, 0.1); } 
 🌀🌀🌀 Click me to change the spin rate for all spinners. 🌀🌀🌀 

prova questo:

 function change() { let elems = document.getElementsByClassName("moon"); elems.forEach(elem => elem.style.animation = "rotate 5s linear infinite"); } 

document.getElementsByClassName restituisce più elementi. È necessario iterare attraverso di loro e applicare le modifiche a ciascun elemento.

 function change() { Array.from(document.getElementsByClassName("moon")).forEach((elem) => { elem.style.animation = "rotate 5s linear infinite"; }); } 

document.getElementsByClassName non restituisce un array. Devi usare Array.from su di esso prima di poter chiamare Array.prototype.forEach .

A proposito,

dovrebbe essere

meno che non si scriva React JSX.