IE에서 동적 CSS 로딩이 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE: 솔루션에서 동적 CSS 로딩 실패

웹 페이지 미적 향상을 추구하려면 CSS를 동적으로 로드해야 하는 경우가 많습니다. 스타일시트. 이 기술은 Firefox 및 Google Chrome과 같은 널리 사용되는 브라우저에서는 원활하게 작동하지만 Internet Explorer(IE)에서는 장애물에 부딪히게 됩니다.

jQuery를 사용하여 동적 CSS 로딩을 달성하는 일반적인 방법은 다음과 같습니다.

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

그러나 이 방법은 이 브라우저에서 원하는 결과를 얻지 못하기 때문에 IE는 독특한 과제를 제시합니다.

이 장애물을 극복하려면, 브라우저별 접근 방식을 채택하는 것이 중요합니다. IE가 페이지와 함께 로드된 모든 스타일이 처리된 상황에 직면한 경우 추가 스타일시트를 추가하기 위한 신뢰할 수 있는 유일한 솔루션은 document.createStyleSheet(url) 메소드를 활용하는 것입니다.

효과적인 크로스 브라우저 구현은 다음과 같습니다.

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

document.createStyleSheet 메소드를 통해 IE의 고유한 동작을 수용함으로써 동적으로 모든 주요 브라우저에 CSS 스타일시트를 로드하여 다양한 플랫폼에서 일관된 시각적 향상을 보장합니다.

위 내용은 IE에서 동적 CSS 로딩이 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!