Cambiar el CSS de un div con nombre de clase usando JavaScript

Quiero cambiar el atributo de animación de mi clase CSS con una función de JavaScript. He estado probando varios métodos pero ninguno funcionó. Por favor, averigua dónde estoy yendo mal.

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://sofes.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:

 

Función de JavaScript:

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

He intentado varios métodos, pero ninguno de ellos puede realizar la modificación. Pasar por el objeto tampoco ayudó.

elem es una colección de elementos HTM, no un elemento único, y la configuración de la propiedad de style de HTMLCollection no funciona.

En cambio, querrá cambiar el estilo de cada elemento individualmente:

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

EDITAR:

Aquí hay un fragmento para mostrar que el método funciona / proporciona una referencia:

 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. 🌀🌀🌀 

prueba esto:

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

document.getElementsByClassName devuelve varios elementos. Necesita iterar a través de ellos y aplicar su cambio a cada elemento.

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

document.getElementsByClassName no devuelve una matriz. Array.from usar Array.from antes de poder llamar a Array.prototype.forEach .

Por cierto,

debería ser

menos que estés escribiendo React JSX.