JavaScript를 사용하여 헤드 섹션에 스타일시트를 어떻게 추가할 수 있나요?

Body에서 JavaScript를 사용하여 헤드 섹션에 스타일시트 추가

웹사이트 헤드에 CSS 스타일시트를 추가해야 하는 경우 섹션이 있지만 헤드를 직접 편집하는 것은 제한되어 있으므로 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를 사용하여 헤드 섹션에 직접 삽입할 수도 있습니다.

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

자바스크립트를 활용하면 헤드 자체를 편집할 수 있는 직접 액세스 권한이 없더라도 웹사이트의 헤드 섹션에 스타일시트를 효과적으로 추가할 수 있습니다.

위 내용은 JavaScript를 사용하여 헤드 섹션에 스타일시트를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!