Add styles using button to Span created using JavaScript

Question

I am trying to rotate a span created using JavaScript on a button click, the class gets added to the span but the rotate doesn't effect the span.

<p>Click the button to create a SPAN element.</p>

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>

<script>
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");
}
function myFunction2() {
var element = document.getElementById("firstPracPara");
element.classList.add("rotate");
}
</script>

<style>
.rotate{
transform: rotate(20deg);
}
</style>

Does this answer your question? [How can I use CSS3 transform on a span?](https://stackoverflow.com/questions/24961795/how-can-i-use-css3-transform-on-a-span) — Parsa Arvaneh, May 16 '22 at 12:59

score 1 · Answer 1 · answered May 16 '22 at 12:58

1

With your current code it is impossible because a span is a inline element.

If you want to complete what you asking you need to put display: block on your span element.

<style>
span { display: block };
.rotate{
transform: rotate(20deg);
}
</style>```

answered May 16 '22 at 12:58

KolaCaine

2,037
5
19
31

that works but do you know how I can do it for each span created? – Asn May 16 '22 at 13:02
You need to specify each span created it is a `display: block` – KolaCaine May 16 '22 at 13:58
https://codepen.io/ah5ann/pen/JjpEOBp i have done – Asn May 16 '22 at 14:13
Nope, it work only for the first span :) You need to loop on all spans – KolaCaine May 16 '22 at 15:34

Add styles using button to Span created using JavaScript

1 Answers1