I am trying to change a spans style using JavaScript but cannot seem to do it. Below I have created the span and given it an Id "spanzo", then I have stored the span in a var "elementtl" and tried two ways to add styles to it but its not doing anything. Styles have already been set to the span, I am just trying to override them styles.
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;
}First of all you need to add a width and height to your #spanzo style for it to actually occupy some space and you need to add it to the <body> element using
document.body.append(letterEl)
All together
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;
}