document에 css 파일 import하기

Javascript에서 css파일을 동적으로 추가하는 ie와 w3c(mozilla계열 firefox, webkit, safari에서 테스트를 해봤습니다.)가 다르게 처리합니다.

1. ie의 경우 createStyleSheet를 사용하여 css를 동적으로 추가할 수 있습니다.

Syntax

oStylesheet = document.createStyleSheet( [sURL] [, iIndex])

sURL에는 css의 url이 들어가며, index에는 document.styleSheets(비표준, document에 사용된 style sheet들의 집합)의 index를 받습니다.

사용 예)

document.createStyleSheet(urlOfCss);

2 . w3c의 경우 createElement를 사용하여서 css를 동적으로 추가할 수 있습니다.
일반적인 element를 DOM으로 생성하는 방법을 사용하여 만들면 됩니다.

사용 예)

var linkElm = document.createElement("link");
linkElm.rel = "stylesheet";
linkElm.href = url_of_css;

var headTag = document.getElementsByTagName("head")[0];
headTag.appendChild(linkElm);

참고 자료 :

MSDN createStyleSheet Method

DOM Client Object Cross-Reference:document