Estoy tratando de cambiar un estilo de tramos usando JavaScript, pero parece que no puedo hacerlo. A continuación, creé el lapso y le di un Id "spanzo", luego almacené el lapso en una var "elementtl" y probé dos formas de agregarle estilos, pero no hace nada. Los estilos ya se han configurado para el intervalo, solo estoy tratando de anularlos estilos.
const letterEl = document.createElement("span"); letterEl.setAttribute("id", "spanzo"); var elementtl = document.getElementById("spanzo"); elementtl.classList.toggle("spanzo1"); elementtl.style.backgroundColor = "red"; #spanzo{ transform: rotatey(0deg); } .spanzo1{ transform: rotatey(180deg); transition: 2s; } const letterEl = document.createElement("span"); letterEl.setAttribute("id", "spanzo"); letterEl.textContent = 'hello world'; document.body.appendChild(letterEl); var elementtl = document.getElementById("spanzo"); elementtl.classList.toggle("spanzo1"); elementtl.style.backgroundColor = "red"; #spanzo{ transform: rotatey(0deg); } .spanzo1{ transform: rotatey(180deg); transition: 2s; }En primer lugar, debe agregar un ancho y una altura a su estilo #spanzo para que realmente ocupe algo de espacio y debe agregarlo al elemento <body> usando
document.body.append(letterEl)Todos juntos
const letterEl = document.createElement("span"); letterEl.setAttribute("id", "spanzo"); document.body.append(letterEl) document.body.appendChild(letterEl); var elementtl = document.getElementById("spanzo"); elementtl.classList.toggle("spanzo1"); elementtl.style.backgroundColor = "red"; #spanzo{ transform: rotatey(0deg); width:50px; height:50px; } .spanzo1{ transform: rotatey(180deg); transition: 2s; } const letterEl = document.createElement("span"); letterEl.innerText = "This is a span."; document.body.appendChild(letterEl); letterEl.setAttribute("id", "spanzo"); var elementtl = document.getElementById("spanzo"); elementtl.classList.toggle("spanzo1"); elementtl.style.backgroundColor = "red"; #spanzo{ transform: rotatey(0deg); } .spanzo1{ transform: rotatey(180deg); transition: 2s; }