JavaScript를 사용하여 헤드에 스타일시트를 동적으로 추가하려면 어떻게 해야 합니까?

JavaScript를 사용하여 헤드에 동적으로 스타일시트 추가

많은 콘텐츠 관리 시스템(CMS)이 헤드 섹션에 대한 액세스를 제한하므로 추가 스타일시트를 통합합니다. 그러나 JavaScript를 사용하는 영리한 솔루션은 이 문제를 효과적으로 해결할 수 있습니다.

스타일시트를 태그를 사용하면 DOM(문서 개체 모델)을 조작하는 JavaScript의 기능을 활용할 수 있습니다. 다음 코드 조각은 이 기술을 보여줍니다.

function addCss(fileName) {
  var head = document.head;
  var link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  head.appendChild(link);
}

jQuery를 사용하는 더 간단한 솔루션을 위해 다음을 고려하세요.

function addCss(fileName) {
  var link = $("<link />", {
    rel: "stylesheet",
    type: "text/css",
    href: fileName
  });
  $('head').append(link);
}

참고: 최근 사양에서는 사용을 금지합니다. <링크> 꼬리표. 그러나 대부분의 브라우저는 여전히 올바르게 렌더링합니다. 따라서 스타일시트를 태그는 기술적으로 가능하지만 사양을 준수하려면 태그를 대신 태그하세요.

위 내용은 JavaScript를 사용하여 헤드에 스타일시트를 동적으로 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!