Obtuve un elemento en línea para girar después de que se creó usando JavaScript al agregarle una nueva clase, pero estoy tratando de agregar ese efecto de giro a todos los intervalos creados con JavaScript, actualmente solo lo está haciendo para 1.
function myFunction() { var x = document.createElement("SPAN"); var t = document.createTextNode("This is a span element."); x.appendChild(t); document.body.appendChild(x); x.setAttribute("id", "firstPracPara"); x.style.display = "block"; } function myFunction2() { var element = document.getElementById("firstPracPara"); element.classList.add("rotate"); } span { display: block; } .firstPracPara { transform: rotate(10deg); } .rotate { -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } <p>Click the button to create a SPAN element.</p> <button onclick="myFunction()">Try it</button> <button onclick="myFunction2()">Spin Span</button>Nunca he usado forEach antes, pero creo que esta es la forma de hacerlo.
x.forEach(function (e) { element.classList.add("rotate"); });Intenta usar así.
function myFunction() { var x = document.createElement("span"); var t = document.createTextNode("This is a span element."); x.appendChild(t); document.body.appendChild(x); x.style.display = "block"; } function myFunction2() { let newSpan = document.querySelectorAll('span'); newSpan.forEach((e) => e.classList.add("rotate")); } span { display: block; } .firstPracPara{ transform: rotate(10deg); } .rotate{ -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } <p>Click the button to create a SPAN element.</p> <button onclick="myFunction()">Try it</button> <button onclick="myFunction2()">Spin Span</button>Use querySelectorAll sabiamente. Puede ignorar tramos ya girados.
Vea el fragmento a continuación:
function myFunction() { var x = document.createElement("SPAN"); var t = document.createTextNode("This is a span element."); x.appendChild(t); document.body.appendChild(x); x.setAttribute("class", "firstPracPara"); x.style.display = "block"; } function myFunction2() { var elements = document.querySelectorAll(".firstPracPara:not(.rotate)"); elements.forEach(_element=>{ _element.classList.add("rotate"); }); } span { display: block; } #firstPracPara { transform: rotate(10deg); } .rotate { -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } <p>Click the button to create a SPAN element.</p> <button onclick="myFunction()">Try it</button> <button onclick="myFunction2()">Spin Span</button>No puedes usar transform en span . Ver este enlace para más explicaciones. ¿Cómo puedo usar la transformación CSS3 en un tramo?
En cuanto a tu otra pregunta:
principal.js
const elements= document.querySelectorAll('.className'); elements.forEach(elemen => element.classList.add('new class name');