JavaScript를 사용하여 문서 헤드에 스타일시트를 삽입하는 방법은 무엇입니까?

JavaScript를 사용하여 헤드에 스타일시트 삽입

CMS의 헤드 섹션을 수정할 수 없으면 CSS 스타일시트를 웹사이트. 그러나 JavaScript를 활용하여 스타일시트를 페이지에 동적으로 삽입하는 솔루션이 있습니다.

이를 달성하려면 스크립트를 생성하여 닫는 꼬리표. 이 스크립트 내에서 document.createElement() 메서드를 사용하여 링크 요소를 구성하고 해당 유형을 "text/css"로 설정하고 rel을 "stylesheet"로 설정할 수 있습니다. 마지막으로 href 속성을 원하는 스타일시트 파일로 설정합니다.

다음은 바닐라 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);
}

addCss('{my-url}');

또는 사용 편의성을 위해 jQuery를 선호하는 경우:

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

addCss("{my-url}");

이전에는 링크 요소를 본문에 추가하는 것이 제안되었지만 이 접근 방식으로 인해 일부 브라우저에서는 스타일시트가 잘못 렌더링될 수 있습니다. 따라서 제공된 예시와 같이 링크를 문서 헤드에 직접 삽입하는 것이 좋습니다.

위 내용은 JavaScript를 사용하여 문서 헤드에 스타일시트를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!