jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 자세한 설명

페이지 레이아웃을 전환할 때와 같이 외부 CSS 파일을 로드하기 위해 jQuery를 사용해야 하는 경우도 있습니다. 아이디어는 링크 요소를 생성하고 이를 태그에 추가하는 것입니다. 먼저 jQuery를 사용하여 이를 구현하는 방법을 살펴보겠습니다.

$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "site.css"
})
.appendTo("head");

어떤 친구들은 아래 작성 방법을 사용하기도 하는데, 형식은 살짝 다르지만(appendTo 추가) 원리는 동일합니다.

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/Content/Site.css"
});

마지막으로 일부 친구들은 javascript에서 직접 사용하고 싶어할 수도 있습니다. 방법은 다음과 같습니다.

function addCSS() {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/Content/Site.css';
document.getElementsByTagName("head")[0].appendChild(link);
}

웹 상호작용 중이라면 위의 방법을 사용하여 CSS 파일을 도입할 수 있습니다. jQuery 또는 javascript. 그렇지 않으면 원래 방법을 사용하는 것이 좋습니다.

다음에는 js와 css를 로딩하는 예도 소개합니다

코드는 다음과 같습니다

$.extend({
includePath: '',
include: function(file) {
var files = typeof file == "string" ? [file]:file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^s|s$/g, "");
var att = name.split(&#39;.&#39;);
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type=&#39;text/css&#39; rel=&#39;stylesheet&#39; " : " language=&#39;javascript&#39; type=&#39;text/javascript&#39; ";
var link = (isCSS ? "href" : "src") + "=&#39;" + $.includePath + name + "&#39;";
if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
}
}
});
//使用方法
$.includePath = &#39;http://hi.xxx/javascript/&#39;; 
$.include([&#39;json2.js&#39;, &#39;jquery.tree.js&#39;, &#39;jquery.tree.css&#39;]);

위 내용은 jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!