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

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

특정 시나리오에서는 웹페이지의 헤드 섹션에 대한 액세스 및 편집이 제한될 수 있습니다. 그러나 사이트의 시각적 모양을 향상하려면 스타일시트를 추가해야 합니다. 이는 의문을 제기합니다. JavaScript를 사용하여 head 태그 뒤에 스타일시트가 삽입되도록 하면서 이 작업을 수행할 수 있습니까?

이 문제를 해결하기 위해 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('{myUrl}');

또는 jQuery를 선호하는 경우:

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

addCss("{myUrl}");

이 방법은 스타일시트 링크 요소를 HTML 문서의 헤드 섹션에 동적으로 추가하여 헤드 섹션에 대한 액세스가 제한되어 있더라도 웹사이트에 스타일을 추가할 수 있습니다.

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