<style> 프로토 타입, CSSStyleRule/CSSRule 엉망 가져 오기

Question

저는 최신 브라우저 (FF 4+, Chrome, Opera 11+, IE8 +)를 지원하면서 작업을위한 자바 프레임 워크를 만드는 중입니다. 오페라에서

1. 더 CSSStyleRule 개체가 없습니다, 심지어 String(rule) === "[object CSSStyleRule]" 경우 (V 11.64까지.) : 나는 (스타일 규칙을 rule입니다 가정) 스타일 규칙의 prototype을 확장하려고 몇 가지 문제가 있습니다. rule instanceof CSSRule이지만 여전히 CSSRule.prototype은 정의되지 않았습니다. 올바른 프로토 타입을 얻는 유일한 방법은 rule.__proto__입니다.
2. 다른 브라우저 (예 : IE)에서 parentStyleSheet 속성을 정의하고자합니다. "parentStyleSheet" in CSSStyleRule.prototype은 항상 거짓이며, 소프트 코딩 된 코드가 정확하지 않기 때문에 (적어도 처음 실행될 때) 네이티브 구현을 재정의하고 싶지는 않습니다.

사용할 수있는 스타일 규칙을 갖는 것은 '나에 가자하기에 충분하지만 문서가로드 전에 을 정의 된 프레임 워크에서 일하고 있어요 때문에이 두 가지 점에 문제가있다, 그래서 내가 할 수있는 것 DOM에 <style> 요소를 추가하십시오.

그래서, 내가 부탁 해요 것은 :

1. 는이 DOM에 부착 할 필요없이 더미 스타일 규칙 (결국 부모 스타일 시트)를 만들 수있는 방법이 있습니까?
2. Opera에서 스타일 규칙 프로토 타입에 액세스하려면 어떻게해야합니까?

나는 첫 번째 질문에 대한 대답은 "아니오"라고 두려워한다. 문서가로드되기 전에 당신이 못생긴 document.write('<link rel="stylesheet" ...을 할 수있는 다음 document.head에 추가 할 수없는 경우

Answer 1

, 그래서 DOM

에 요소를 추가 할 수 없습니다. 그러나 AFAIK 이것은 당신이 document.head에 추가되는 한 문제가 아니다 - 우리가 우리의 프레임 워크에서 할 것입니다 :

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.type = 'text/css'; 
link.href = 'http://example.com/stylesheet.css'; 
document.head.appendChild(link); 

:

<script> 
    (function(){ 
     var s='blueskin'; 
     var link=document.createElement('link'); 
     var h=document.getElementsByTagName('head')[0]; 
     link.type='text/css'; 
     link.rel='stylesheet'; 
     link.href='/skins/'+s+'.css'; 
     h&&h.appendChild(link); 
    })(); 
</script> 

동적으로 외부 CSS 파일의 스타일 시트를 추가하려면 당신이 문자열로 CSS가있는 경우

는, 당신은 동적으로 사용하여 style 요소를 추가 할 수 있습니다 (이것은 내가 사용하는 모든 브라우저에서 작동하고, 나는이이 오페라 작동 생각하지만, 나는 최근에 그것을 시도하지 않은) :

var styleElement = document.createElement('style'); 
styleElement.type = 'text/css'; 
styleElement.rel = 'stylesheet'; 
setCss(styleElement, css); 
document.head.appendChild(styleElement); 

function setCss(styleElement, css) { 
    if (styleElement.styleSheet) { // IE 
     styleElement.styleSheet.cssText = css || ''; 
    } else { 
     var firstChild = styleElement.firstChild; 
     firstChild && styleElement.removeChild(firstChild); 
     var textnode = document.createTextNode(css || ''); 
     styleElement.appendChild(textnode); 
    } 
} 

cssFx 프로젝트는 더 복잡한 작업을 수행하려는 경우 <link rel="stylesheet" 요소의 오페라에 대한 CSS를 동적으로 수정합니다.

document.head에 추가하고 싶지 않은 경우 기존 스타일 시트 (@import에 해당)에 하위 스타일 시트를 추가 할 수 있습니다. 단, 이에 대한 스 니펫이 없습니다.

마지막으로 스타일 시트를 본문으로 가져 가야하는 경우 onload 또는 jQuery $ (myReadyFn)을 사용해야합니다. 이벤트 핸들러.