js 및 jquery를 사용하여 링크 태그를 생성하는 사용 예에 ​​대한 자세한 설명

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

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

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

var cssURL = '/style.css',
    linkTag = $(&#39;<link href="&#39; + cssURL + &#39;" rel="stylesheet" type="text/css" media="&#39; + (media || "all") + &#39;" charset="&#39;+ charset || "utf-8" +&#39;" />&#39;);
// 请看清楚，是动态将link标签添加到head里   
$($(&#39;head&#39;)[0]).append(linkTag);

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

순수한 성격의 JavaScript처럼 다음과 같이 작성해야 합니다.

var head = document.getElementsByTagName('head')[0],
    cssURL = '/style.css',
    linkTag = document.createElement('link');
 
    linkTag.id = 'dynamic-style';
 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 的同时就已经把link标签添加到了head中了，怎么讲呢，倒是挺方便
    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){
     return false;
 }
 
 linkTag = $(&#39;<link href="&#39; + cssURL + &#39;" rel="stylesheet" type="text/css" media="&#39; + (media || "all") + &#39;" charset="&#39;+ charset || "utf-8" +&#39;" />&#39;);
  
 head.append(linkTag);
}
function createLink(cssURL,lnkId,charset,media){ 
    var head = document.getElementsByTagName(&#39;head&#39;)[0],
        linkTag = null;
  
 if(!cssURL){
     return false;
 }
    
 linkTag = document.createElement(&#39;link&#39;);
 linkTag.setAttribute(&#39;id&#39;,(lnkId || &#39;dynamic-style&#39;));
 linkTag.setAttribute(&#39;rel&#39;,&#39;stylesheet&#39;);
 linkTag.setAttribute(&#39;charset&#39;,(charset || &#39;utf-8&#39;));
 linkTag.setAttribute(&#39;media&#39;,(media||&#39;all&#39;));
 linkTag.setAttribute(&#39;type&#39;,&#39;text/css&#39;);
    linkTag.href = cssURL; 
 
    head.appendChild(linkTag); 
}

위 내용은 js 및 jquery를 사용하여 링크 태그를 생성하는 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!