JavaScript는 동적으로 링크 태그를 헤드로 만듭니다

이 기사에서는 JavaScript 헤드에 링크 태그를 동적으로 생성하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.

많은 프론트 엔드 친구들이 JavaScript를 사용하여 스타일 태그 - 링크 태그를 동적으로 생성해야 할 필요성을 발견했다고 생각합니다. 여기서 브라우저에서 링크 태그를 동적으로 만드는 방법에 대해 이야기하겠습니다.

jQuery로 링크 태그를 만듭니다

개발 중에 jQuery를 사용하려면 jQuery를 사용하여 링크 태그를 생성해야합니다.

코드 사본은 다음과 같습니다. var cssurl = '/style.css',

linktag = $ ( '<link href = "' + cssurl + '"rel = "stylesheet"type = "text /css"media = "' + (media ||"all ")"charset || "utf-8" + ' " />');

// 헤드에 링크 태그를 동적으로 추가하십시오.

$ ($ ( 'head') [0]). Append (LinkTag);

기본 JavaScript를 사용하여 링크 태그를 만듭니다

순수하고 자연스러운 자바 스크립트를 좋아한다면 다음과 같이 써야합니다.

코드 사본은 다음과 같습니다. var head = document.getElementsByTagName ( 'head') [0],

cssurl = '/style.css',

linktag = document.createElement ( 'link');

linktag.id = '동적 스타일';

linktag.href = cssurl;

linktag.setattribute ( 'rel', 'stylesheet');

linktag.setattribute ( 'media', 'all');

linktag.setattribute ( 'type', 'text/css');

Head.appendChild (LinkTag);

IE의 독특한 방법 CreatestyLesheet

IE의 독특한 방법도 매우 편리합니다.

코드 사본은 다음과 같습니다. var head = document.getElementsByTagName ( 'head') [0],

cssurl = '테마/bluenight/style.css',

// document.createstylesheet은 링크 태그를 헤드에 추가했습니다. 어떻게 말하는지, 그것은 매우 편리합니다

linktag = document.createstylesheet (cssurl);

CreateStylesheet ([SURL] [, IINDEX]) 메소드는 두 매개 변수를 허용하고 SURL은 CSS 파일의 URL 경로입니다. IINDEX는 선택적 매개 변수로, 페이지에 삽입 된 스타일 시트 컬렉션의 인덱스 위치를 나타냅니다. 기본적으로 새로 생성 된 스타일은 마지막에 추가됩니다.

완전한 해결책

기본적으로 모든 것이 소개되었으며 전체 솔루션을 살펴 보겠습니다.

코드 사본은 다음과 같습니다. function createlink (cssurl, lnkid, charset, media) {

var head = $ ($ ( 'Head') [0]),

linktag = null;

if (! cssurl) {

거짓을 반환합니다.

}

linktag = $ ( '<link href = "' + cssurl + '"rel = "stylesheet"type = "text /css"media = "' + (media ||"all ")"charset || "utf-8" + ' " />');

Head.Append (LinkTag);

}

함수 createlink (cssurl, lnkid, charset, media) {

var head = document.getElementsByTagName ( 'head') [0],

linktag = null;

if (! cssurl) {

거짓을 반환합니다.

}

linktag = document.createElement ( 'link');

linktag.setattribute ( 'id', (lnkid || '동적 스타일'));

linktag.setattribute ( 'rel', 'stylesheet');

linktag.setattribute ( 'charset', (charset || 'utf-8'));

linktag.setattribute ( 'media', (media || 'all'));

linktag.setattribute ( 'type', 'text/css');

linktag.href = cssurl;

Head.appendChild (LinkTag);

}

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.