Question

I want to load the css properties in javascript.

I have two canvases and i have loaded a css file in the head tag.

I want to do that when a certain option is selected, the css of the canvases change. If it would be simple css it could be done by ‘canvas.style.csstext’ but i’m applying transform for tilting the element so it doesn’t work in ‘canvas.style.csstext’.

So how can i do that!

Answer 1

OK, I’ll post as an answer here so others can see.

There’re various methods, like injecting a link element, or use document.styleSheets[0].insertRule, but in your case, a better solution would be to include both CSS files in header, with different selectors, and modify the canvas.className when needed.

Illustration:

<link href="main.css" /> <!--canvas{border:...}-->
<link href="alternate.css" /> <!--canvas.alter{border:...}-->
<!--...-->
<canvas id="needToAlter"></canvas>
<button onclick="document.getElementById('needToAlter').className+=' alter';">Alter</button>