網頁

動態加入外部 Javascript 和 CSS 檔

[ 前言 ]
什麼時候需要動態加入外部 Javascript 和 CSS 檔呢? 例如想隨時切換網頁的樣式、字型大小或者是當需要用到的時候再載入,節省讀取的時間。

一般我們會先把外部 Javascript 和 CSS 是放在<head>...</head>之間,宣告方式如下。
<head>
   <script type="text/javascript" src="demo.js"></script>
   <link type="text/css" ref="stylesheet" src="demo.css"></link>
</head>
如果不想一開始就載入,那就來看看如何動態加入 Javascript 和 CSS,而不是事先就宣告在 head 標籤裡面。

[ 動態加入 Javascript 和 CSS 的方法 ]
Javascript 部分

var headID = document.getElementsByTagName("head")[0]; 
var newJs = document.createElement('script');
newJs.type = 'text/javascript';
newJs.src= "demo.js";
headID.appendChild(newJs);
首先取得 head 標籤,然後宣告 newJs 變數為 script 標籤,再設定 type 及 src 屬性,最後使用 appendChild 屬性將 newJs 加入到<head>...</head>之間就可以了。

CSS 部分

var headID = document.getElementsByTagName("head")[0]; 
var newCss = document.createElement('link');
newCss.type = 'text/css';
newCss.rel = "stylesheet";
newCss.href = "blah.css";
headID.appendChild(newCss);
一樣先取得 head 標籤,然後宣告 newCss 變數為 link 標籤,再設定 type、rel 及 href 屬性,最後使用 appendChild 屬性將 newCss 加入到<head>...</head>之間就可以了。

[ 參考資料 ]

沒有留言:

張貼留言

1. 文章如有錯誤,歡迎指正。
2. 請勿打廣告,違者一律刪。
3. 歡迎您提供寶貴的意見。