動態加入外部 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. 歡迎您提供寶貴的意見。