jQuery를 사용하여 동적으로 로드된 인라인 또는 외부 CSS 적용 jQuery를 사용하여 AJAX를 통해 HTML 콘텐츠를 로드할 때 특정 CSS를 포함해야 할 수 있습니다. 적절한 렌더링을 위한 스타일. 그러나 동적으로 추가된 CSS는 삽입 시 브라우저에서 평가되지 않을 수 있습니다. 동적 CSS 삽입 옵션 CSS를 동적으로 삽입하는 방법에는 여러 가지가 있습니다. DOM: 인라인 스타일시트 동적으로 요소를 <head> 섹션:</p> <pre>var myCSS = 'body { background-color: red; }'; $('<style type="text/css">').html(myCSS).appendTo('head');</pre> <p><strong>외부 스타일 시트</strong></p> <p>jQuery의 $.get() 메서드를 사용하여 외부 CSS 파일을 로드합니다.</p> <pre>$.get('myStyles.css', function(css) { $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head'); });</pre> <p><strong>동적으로 생성<link> 태그</strong></p> <p><링크> 요소를 동적으로 작성하여 <head> 섹션:</p> <pre>$('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');</pre> <p><strong>동적으로 생성<스타일> @import 사용</strong></p> <p>동적으로 생성된 <style> 내에서 @import를 사용하세요. 요소:</p> <pre>var myCSS = '@import url("myStyles.css")'; $('<style type="text/css">').html(myCSS).appendTo('head');</pre> <p><strong>지원되는 브라우저</strong></p> <p>Internet Explorer는 동적으로 추가될 때 인라인 CSS를 평가하지만 Chrome에서는 외부 CSS를 평가하려면 @import를 사용해야 합니다. 동적 CSS 삽입에 대한 Firefox 지원은 버전에 따라 다를 수 있습니다.</p>