program story

IE에서 CSS 스타일 시트를 동적으로로드 할 수 없습니다.

inputbox 2020. 10. 26. 07:58
반응형

IE에서 CSS 스타일 시트를 동적으로로드 할 수 없습니다.


다음과 같이 jQuery의 약간의 도움으로 CSS 스타일 시트를 동적으로로드합니다.

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

이것은 Firefox 및 Google Chrome에서 잘 작동하지만 IE 에서는 작동 하지 않습니다 .

도움이 필요하세요? 감사


IE가 페이지와 함께로드 된 모든 스타일을 처리하면 다른 스타일 시트를 추가 할 수있는 유일한 방법은 document.createStyleSheet(url)

자세한 내용은 createStyleSheet에 대한 MSDN 문서 를 참조하십시오.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

href 속성을 마지막으로 설정하고 링크 elem이 헤드에 추가 된 후에 만 ​​설정해야합니다.

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

이것은 또한 IE에서 작동하는 것 같습니다.

var link = document.createElement ( 'link');
link.rel = '스타일 시트';
link.type = '텍스트 / css';
link.href = '/includes/style.css';
document.getElementsByTagName ( 'head') [0] .appendChild (link);

이것은 또한 그것과 관련이있을 수 있습니다 -Microsoft 지원 문서에서 발췌 :

Microsoft Internet Explorer 버전에서 페이지를로드 할 때 웹 페이지의 스타일이 누락되거나 잘못 보입니다 ...

...이 문제는 Internet Explorer에서 다음 조건에 해당하기 때문에 발생합니다.

  • 처음 31 개의 스타일 태그 이후의 모든 스타일 태그는 적용되지 않습니다.

  • 처음 4,095 규칙 이후의 모든 스타일 규칙은 적용되지 않습니다.

  • @import 규칙을 사용하여 다른 스타일 시트를 가져 오는 외부 스타일 시트를 지속적으로 가져 오는 페이지에서 깊이가 3 개 이상인 스타일 시트는 무시됩니다.


그것은 보인다

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

URL이 프로토콜을 포함하는 정규화 된 URI 인 한 IE에서도 작동합니다.


디버거를 열지 않고 ie8을 엽니 다. 동적 스타일 시트의 요점에 도달하면 디버거를 열고 짜잔을 열면 거기에 있어야합니다.

참고 URL : https://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie

반응형