JavaScript는 CSS의 동적 로딩을 구현합니다

코드 사본은 다음과 같습니다.

<script type = "text/javaScript">

함수 추가 스타일 (StylePath) {

var 컨테이너 = document.getElementsByTagName ( "Head") [0];

var addStyle = document.createElement ( "링크");

addStyle.rel = "스타일 시트";

addStyle.type = "Text/CSS";

addStyle.media = "화면";

addStyle.href = StylePath;

컨테이너. AppendChild (추가 스타일);

}

AddStyle ( 'http://www.xxx.com/wintys/dynamic.css');

</스크립트>

JS가 작성한 기능은 JS 파일의 동적로드를 제어하는 ​​데 사용됩니다. 즉, JS 파일이 필요할 때로드되고 CSS 파일도로드하여 웹 페이지 스키닝을 실현할 수 있습니다. 이 기능이 잘 쓰여졌다 고 생각합니다. 자세히 살펴보면 개선 한 후에도 여전히 좋습니다.

코드 사본은 다음과 같습니다.

함수 $ import (Path, Type, Title) {

var s, i;

if (! type) type = path.substr (path.lastindexof ( ".")+1);

if (type == "js") {

var ss = document.getElementsByTagName ( "스크립트");

for (i = 0; i <ss.length; i ++) {

if (ss [i] .src && ss [i] .src.indexof (path)! = -1 || ss [i] .title == title) 반환 ss [i];

}

s = document.createElement ( "스크립트");

s.type = "Text/JavaScript";

s.src = 경로;

if (제목) s.title = 제목;

}

else if (type == "css") {

var ls = document.getElementsByTagName ( "링크");

for (i = 0; i <ls.length; i ++) {

if (ls [i] .href && ls [i] .href.indexof (path)! = -1 || ls [i] .title == title) return ls [i];

}

s = document.createElement ( "link");

S.Rel = "스타일 시트";

s.type = "text/css";

s.href = 경로;

if (제목) s.title = 제목;

s.disabled = false;

}

그렇지 않으면 반환;

var head = document.getElementsByTagName ( "Head") [0];

Head.appendChild (들);

반환 s;

}