'Changing element style using JavaScript

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;
}

javascript

Solution 1:^[1]

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;
}

Solution 2:^[2]

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;
}

Solution 3:^[3]

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;
}

Solution 4:^[4]

To create and append an element you may want to use insertAdjacentHTML. To add or remove css-classes use classList[add/remove]. For example:

document.body.insertAdjacentHTML(`beforeend`, 
  `<div id="spanzo">Hi, i am div#spanzo</div>`);
document.addEventListener(`click`, handle);

function demo() {
  const demoElem = document.querySelector(`#spanzo`);
  demoElem.textContent = `Hi, i am div#spanzo. Wait a sec ...`;
  setTimeout(() => {
    demoElem.classList.add(`spanzo1`);
    setTimeout(() => {
      demoElem.classList.remove(`spanzo1`);
      demoElem.textContent = `I'm back!`}, 3000);
    }, 1000);
}
  
function handle(evt) {
  if (evt.target.nodeName === `BUTTON`) {
    return demo();
  }
}

#spanzo.spanzo1{
  transform: rotatey(180deg);
  transition: 2s;
}

<button>Demo</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Arezou Saremian
Solution 2	Icekid
Solution 3
Solution 4	KooiInc

'Changing element style using JavaScript

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]