JavaScript를 사용한 CSS 값 수정

JavaScript는 인라인 CSS 값을 설정하는 쉬운 방법을 제공합니다. 그러나 이 방법은 인라인이 아닌 스타일시트 내에 정의된 CSS 값을 수정할 때 문제가 될 수 있습니다.

스타일시트에서 CSS 값 검색

인라인이 아닌 JavaScript에서는 document.styleSheets를 통해 스타일시트에 액세스할 수 있습니다. 이 함수는 문서에 있는 모든 스타일시트의 배열을 반환합니다. 특정 스타일시트를 찾으려면 document.styleSheets[styleIndex].href 속성을 사용합니다.

스타일시트 CSS 규칙 수정

원하는 스타일시트가 식별되면 다음 단계 CSS 규칙의 배열을 얻는 것입니다. 이 배열은 Internet Explorer의 경우 규칙 속성을 사용하고 대부분의 다른 브라우저의 경우 cssRules를 사용하여 액세스됩니다. 각 규칙은 selectorText 속성으로 구분할 수 있습니다.

CSS 값을 수정하려면 규칙의 value 속성을 설정하세요. 업데이트된 코드는 다음과 유사합니다.

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

이 접근 방식을 사용하면 CSS 값을 전체적으로 변경하여 지정된 스타일로 모든 요소를 ​​효과적으로 업데이트할 수 있습니다.