CSS 파일을로드하고 이전 파일을 덮어 쓰기

Question

자바 스크립트에서 CSS 속성을로드하려고합니다.

나는 두 개의 캔버스가 있고 head 태그에 CSS 파일을로드했습니다.

특정 옵션을 선택하면 캔버스의 CSS가 변경됩니다. 간단한 CSS라면 'canvas.style.csstext'로 할 수 있지만 'canvas.style.csstext'에서 작동하지 않도록 요소를 기울이기위한 변형을 적용하고 있습니다.

어떻게 그렇게 할 수 있습니까?

Answer 1

좋아, 다른 사람들이 볼 수 있도록 여기에 답변으로 게시하겠습니다.

거기 link 요소를 주입과 같은 다양한 방법이야, 또는 document.styleSheets[0].insertRule를 사용하지만 귀하의 경우, 더 나은 솔루션은 다른 선택기와 헤더에 모두 CSS 파일을 포함하고, 필요할 때 canvas.className을 수정하는 것입니다.

그림 :

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