JavaScript_javascript 기술을 사용하여 헤드에 링크 태그를 동적으로 생성하는 방법

본 글의 예시에서는 자바스크립트를 이용하여 헤드에 링크 태그를 동적으로 생성하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

많은 프런트 엔드 친구들이 JavaScript를 사용하여 스타일 시트 태그, 즉 링크 태그를 동적으로 생성해야 할 필요성을 경험했다고 생각합니다. 여기에서는 브라우저에서 링크 태그를 동적으로 생성하는 방법에 대해 설명합니다.

jQuery를 사용하여 링크 태그 생성

개발 시 jQuery를 사용하려는 경우 jQuery를 사용하여 링크 태그를 만드는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var cssURL = '/style.css',
linkTag = $('');
// 링크태그는 헤드에 동적으로 추가되어 있으니 잘 확인해주세요
$($('head')[0]).append(linkTag);

기본 JavaScript를 사용하여 링크 태그 만들기

순수하고 자연스러운 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 고유의 createStyleSheet 방식도 매우 편리합니다.

코드 복사 코드는 다음과 같습니다.

var head = document.getElementsByTagName('head')[0],
cssURL = 'themes/BlueNight/style.css',
// document.createStyleSheet 링크태그가 헤드에 동시에 추가되어 있어서 참 편리하네요
LinkTag = document.createStyleSheet(cssURL);

createStyleSheet([sURL] [, iIndex]) 메소드는 두 개의 매개변수를 허용하며, sURL은 CSS 파일의 URL 경로입니다. iIndex는 페이지의 스타일시트 컬렉션에 삽입된 링크의 인덱스 위치를 참조하는 선택적 매개변수입니다. 기본값은 새로 생성된 스타일을 끝에 추가하는 것입니다.

완벽한 솔루션

기본적으로 소개는 끝났습니다. 이제 전체 솔루션을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

function createLink(cssURL,lnkId,charset,media){
var 헤드 = $($('head')[0]),
LinkTag = null;

if(!cssURL){
거짓을 반환합니다.
}

linkTag = $('');

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 프로그래밍 설계에 도움이 되기를 바랍니다.