동적 스타일 클래스 캡슐화 JS code_javascript 기술

// CssRule 클래스는 StyleSheet에서 제공됩니다. getRule 메소드는
function CssRule(rule) {
this.rule = rule;
this.style = rule.style; = rule.selectorText;
this.index = null;
}
function StyleSheet() {
var head = document.getElementsByTagName("head")[0]//Create 새 태그를 생성하여 새 스타일
/*
Document.createStyleSheet는 FF
CSS 파일을 가져오지 않으면 document.createStyleSheet 메소드가 실패하므로 여기서는 사용되지 않습니다.
*/
var style = document.createElement("style");
style.type = "text/css";
head.appendChild(style)
this.CatchStyle(document.styleSheets.length - 1);
}
StyleSheet.prototype = {
//기존 스타일을 직접 캡처할 수 있음
CatchStyle: function(index) {
this.style = document.styleSheets[index]
if (navigator.userAgent.indexOf("MSIE") < 0) { //IE가 아닌 브라우저 패치
this.style.addRule = function(selector, style) {
var index = this.cssRules.length ;
this.insertRule(selector "{" style "}", index);
this.style.removeRule = function(index) {
this.deleteRule(index); 🎜>} ;
}
},
//스타일 추가
AddRule: function(selector, style) {
this.style.addRule(selector, style)
} ,
//스타일 제거
RemoveRule: function(index) {
this.style.removeRule(index);
},
//모든 스타일 가져오기
getRules: function( ) {
if (this.style.rules) { //IE
return this.style.rules
}
return this.style.cssRules //IE가 아님
} ,
//선택기를 통해 스타일 가져오기
getRule: function(selector) {
var rule = this.getRules()
for (var i = 0; i < rule.length ; i ) {
var r = rule[i];
if (r.selectorText == selector) {
var rule = new CssRule(r)
rule.index; 🎜>return rule;
}
}
return null;
}
}


샘플 코드 호출