jQuery를 사용하여 동적으로 로드된 인라인 CSS 또는 외부 CSS를 적용하는 방법

jQuery를 사용하여 동적으로 로드된 인라인 CSS 또는 외부 CSS를 적용하는 방법

JQuery를 사용하여 Yahoo 팝업에 로드된 Ajax 컨트롤이 있습니다.

간단한 .get 요청을 사용하여 HTML을 로드합니다.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

여기서 문제는 로드되는 콘텐츠에는 실제로 동적으로 작성되는 자체 CSS가 필요하다는 것입니다.인라인 또는 외부 CSS 스타일시트 중 하나를 선택할 수 있습니다.

Chrome에서 테스트한 결과 AJAX를 통해 로드된 CSS는 위의 코드를 사용하여 DOM에 추가될 때 평가/적용되지 않습니다.

Internet Explorer는 인라인 CSS가 DOM에 막혔을 때 평가하지만 Chrome은 평가하지 않습니다.전혀 관계가 없는 문제로 현재 FireFox에서 테스트를 할 수 없습니다.

jQuery에서 DOM에 동적으로 추가된 스타일시트를 인라인 또는 인라인으로 평가할 수 있는 방법이 있습니까?

이렇게 하고 싶은 이유는 여러 가지가 있습니다.

• 팝업의 CSS는 팝업에 속하며 모두 다른 환경에서 온 것일 수 있습니다.
• 이것은 동적이고, 꼭 필요한 경우가 아니면 부모 페이지에 삽입하고 싶지 않습니다.
• 이렇게 하려고 했는데 안 되네! :- (

스타일시트 경로(또는 유효한 CSS를 생성하는 URL)를 지정합니다.

var myStylesLocation = "myStyles.css";

...다음 중 하나가 동작합니다.

AJAX를 사용하여 로드

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});   

동적으로 작성된 <link>를 사용하여 로드합니다.

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

동적으로 작성된 <style>을 사용하여 로드합니다.

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

또는

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

IE 7(및 IE 8의 버그)에서는, 허가된 회답은 동작하지 않습니다.다음은 IE 및 FF 및 Chrome/safari에서도 동작합니다.

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

var cssPath = "/path/to/css/";

var linkStr = document.createElement("<link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' />");

document.getElementsByTagName("head")[0].appendChild(linkStr);

언급URL : https://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery