AJAX 콘텐츠용 jQuery를 사용하여 인라인 또는 외부 CSS를 동적으로 적용하려면 어떻게 해야 합니까?

jQuery를 사용하여 Inline 또는 외부 CSS를 동적으로 적용

jQuery를 사용하여 Ajax 콘텐츠를 페이지에 통합할 때 적용된 CSS를 관리해야 합니다. 그 내용에. 이 기사에서는 로드된 콘텐츠가 올바르게 표시되도록 인라인 CSS를 적용하거나 외부 CSS 스타일시트를 동적으로 로드하는 방법을 살펴봅니다.

문제

다음을 사용하여 Ajax 콘텐츠를 Yahoo 팝업에 로드 jQuery의 .get 메서드는 동적으로 생성된 CSS를 적용하는 데 문제를 일으킵니다. Chrome은 DOM 인라인에 추가된 CSS를 평가하지 않지만 Internet Explorer는 평가합니다. 인라인이나 외부로 동적으로 로드된 CSS를 평가하는 방법을 찾는 것이 중요합니다.

솔루션

jQuery는 CSS를 동적으로 로드하고 평가하기 위한 여러 가지 방법을 제공합니다.

인라인 CSS 로드 AJAX

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

동적으로 생성된

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

동적으로 생성된 외부 CSS 로드

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

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

이러한 메서드를 사용하면 비동기식으로 로드된 콘텐츠에 대해 CSS를 동적으로 로드하고 평가할 수 있으므로 로드된 콘텐츠의 적절한 스타일 지정 및 표시가 사용자에게 보장됩니다.

위 내용은 AJAX 콘텐츠용 jQuery를 사용하여 인라인 또는 외부 CSS를 동적으로 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!