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

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

jQuery를 사용하여 AJAX를 통해 HTML 콘텐츠를 로드할 때 특정 CSS를 포함해야 할 수 있습니다. 적절한 렌더링을 위한 스타일. 그러나 동적으로 추가된 CSS는 삽입 시 브라우저에서 평가되지 않을 수 있습니다.

동적 CSS 삽입 옵션

CSS를 동적으로 삽입하는 방법에는 여러 가지가 있습니다. DOM:

인라인 스타일시트

동적으로

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

외부 스타일 시트

jQuery의 $.get() 메서드를 사용하여 외부 CSS 파일을 로드합니다.

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

동적으로 생성 태그

요소를 동적으로 작성하여

섹션:

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

동적으로 생성 @import 사용

동적으로 생성된

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

지원되는 브라우저

Internet Explorer는 동적으로 추가될 때 인라인 CSS를 평가하지만 Chrome에서는 외부 CSS를 평가하려면 @import를 사용해야 합니다. 동적 CSS 삽입에 대한 Firefox 지원은 버전에 따라 다를 수 있습니다.

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