쿠...sal: [컴][웹] javascript 로 css 내용 변경하기

자바스크립트로 css rule 을 삭제 하는법 / how to remove css rule using javascript / css 변경 방법 / 자바스크립트로 css rule 변경방법

기존의 element 에 css 를 적용하는 방법

보통 html 에서 특정 element 를 보이지 않게 하기 위해서 javascript 를 이용해서 특정 class 를 add 하는 방식등으로 이것을 해결한다.

$('.visible').addClass('.unvisible')

css rule 을 수정해서 적용하는 방법

그런데 addClass 를 이용해서 class 를 모든 element 에 추가하는 것보다, element 가 가지고 있는 class 의 내용(rule)을 변경해서 적용해 보고 싶었다.

속도 추정

둘 중 어느것이 속도면에서 나은지는 알 수 없지만, plain javascript 에서 일괄적으로 class 를 add 하는 함수는 제공되지 않기 때문에 css 의 rule 을 변경하는 것이 더 빠르게 동작하지 않을까 하는 추측을 해본다.

rule 추가, 삭제

여하튼, 본론으로 돌아가서, 이제 rule 을 변경 해 보자. 참고로 실제로 존재하는 rule 을 변경하는 javascript 는 제공되지 않는듯 하다. 그래서 element 에 특정 class 를 집어넣고, rule 을 만들고, rule 을 지우는 방식으로 적용하면 된다.

먼저 html element 에 test 라는 class 를 추가해 놓자.
그리고 javascript 에 아래같은 code 를 이용해 rule 을 추가해서 element 를 보이지 않게 할 수 있고, rule 을 삭제하는 것으로 다시 보이게 할 수도 있다.

var index = 1
document.styleSheets[0].insertRule(".test{display:none;}", index)
document.styleSheets[0].deleteRule(index)

rule 을 추가하고 삭제하는 것과 관련돼서 ref. 1에서 간단한 함수를 만들었다. 그래서 여기로 옮겨놨다. 참고하자.

function addCSSRule(sheet, selector, rules, index) {
 if(sheet.insertRule) {
  sheet.insertRule(selector + "{" + rules + "}", index);
 }
 else {
  sheet.addRule(selector, rules, index);
 }
}

function removeCSSRule(sheet, index) {
 if(sheet.deleteRule) {
  sheet.deleteRule(index);
 }
 else {
  sheet.removeRule(index);
 }
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

주의할 점

한가지 주의할 점은 같은 index 로 2번 insertRule 을 해도 되는데, 이렇게 되면 같은 index 로 2개의 css rule 이 존재하게 된다. 그러니 되도록 insertRule 이전에 deleteRule 을 하는 것이 나을 듯 하다.

deleteRule 도 insertRule 없이 계속 하게 되면 index 가 감소하는 듯 하다. 그렇게 되면 결국 -1 (4294967295) 로 가게 돼서 계산이 불가능해진다. (일단 chrome 에서는 그렇다. 약간의 버그성인듯 싶다.)

document.styleSheets[0].deleteRule(0)

VM19030:2 Uncaught DOMException: Failed to execute 'deleteRule' on 'CSSStyleSheet': The index provided (0) is larger than the maximum index (4294967295).

chrome 에서의 이상동작

chrome 41.0.2272.101 버전에서 test 를 해봤는데
아래처럼 rule 을 한 개 더하고 나서 다른 index 를 처리해서 remove 를 한 후 , 원래의 index 를 사용해서 remove 를 했는데, 제대로 동작하지 않았다. 뭔가 느낌이 css rule 의 개수를 count 하고, deleteRule() 을 할 때마다 count 를 무조건 감소시키는 듯 하다.

document.styleSheets[0].insertRule(".testclass{display:none}", 13)
13
document.styleSheets[0].deleteRule(12)
undefined
document.styleSheets[0].deleteRule(13)
undefined

References

5 Ways that CSS and JavaScript Interact That You May Not Know About

쿠...sal

[컴][웹] javascript 로 css 내용 변경하기