2012-04-27 2 views
2

Firefox와 Chrome을 사용하면 <style> 요소를 만들고이를 JavaScript로 채울 수 있습니다. 나는 과거에 IE (IE6와 같은)에서 여러 가지 상황을 겪었다 고 맹세 할 수있었습니다. 그러나 지금은 IE (7 또는 8; 9를 시도하지 않은)를 가져 와서 설정하지 못하게했습니다.<style> 요소 만들기 및 채우기

"cssText"속성에 대한 기억이 있습니다. 그러나 이제는 (이상하게도 줄어들었지만, MSDN 설명서 사이트에 어떤 일이 일어 났는지 알 수 있습니까?) MSDN 문서는 스타일 시트 API의 일부로만 나타나며 그렇지 않습니다. DOM 요소로서.

그래서 Internet Explorer에서 <style> 요소를 만들고 채우는 것이 가능합니까?

Here 다음과 같은 jQuery 코드로, 사소한 jsfiddle 예입니다 : 파이어 폭스, 크롬, 오페라에서

$('head').append($('<style/>', { html: 'div { color: red; }' })); 

작품 잘.

편집 — 그래, 난 해봤 설정 "텍스트"대신 "HTML"(나는. 나는 그것을에있어 동안은 Android 및 iOS를 시도해야 추측), 그것은 도움이되지 않습니다. jQuery없이 "innerText"를 설정하려고해도 작동하지 않습니다.

+1

이 방법을 찾고 계셨습니까? http://stackoverflow.com/questions/436710/element-appendchild-chokes-in-ie? –

답변

3

다음은 이전에이 작업을 수행 한 방법입니다. 나는 거의 직선 내 일부 이전 코드에서이를 복사 한,하지만 내 기억이 맞다 경우 styleSheet 속성에만 IE에서 사용하는, 당신이 언급 한 바와 같이, 즉 사용해야 할 때입니다 cssText :

var styleElem = document.createElement("style"); 
styleElem.type = "text/css"; 
styleRules = document.createTextNode(".someClass { color: red; }"); 
if(styleElem.styleSheet) { 
    styleElem.styleSheet.cssText = styleRules.nodeValue; 
} 
else { 
    styleElem.appendChild(styleRules); 
} 
document.getElementsByTagName("head")[0].appendChild(styleElem);​ 

여기에 working example (최신 Chrome 및 IE6에서 테스트 됨)입니다.

+0

네, 맞습니다. doh. 나는 그것에게 시도를주고, 초 안에 받아 들일 것이다. – Pointy

+0

오, jQuery 버그를 기록 할 것입니다. 실제로이 일을 어떻게해야할까요? – Pointy

+0

@Pointy - 예, 브라우저 불일치를 정상화하도록 jQuery가 설계 되었기 때문에 이것이 유용한 추가 기능이라고 생각합니다. –

관련 문제