> 웹 프론트엔드 > JS 튜토리얼 > jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 자세한 설명

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

伊谢尔伦
풀어 주다: 2017-07-21 09:30:30
원래의
1879명이 탐색했습니다.

페이지 레이아웃을 전환할 때와 같이 외부 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(&#39;link&#39;);
link.type = &#39;text/css&#39;;
link.rel = &#39;stylesheet&#39;;
link.href = &#39;/Content/Site.css&#39;;
document.getElementsByTagName("head")[0].appendChild(link);
}
로그인 후 복사

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

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

코드는 다음과 같습니다


$.extend({
includePath: &#39;&#39;,
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿