外部cssjs資源（外部CSS）

本文目錄一覽：

• 1、如何在CI中引入外部CSS和JS
• 2、外部的js文件怎麼調用外部的css文件
• 3、在JS文件中調用外部CSS文件
• 4、如何動態載入外部CSS與JS文件
• 5、怎樣把外部的 CSS樣式和JS文件，導入DW軟體中。
• 6、如何導入外部JS文件和Css文件求解

如何在CI中引入外部CSS和JS

其實不管是在用CI還是ZF都有同樣一個問題，就是路徑的問題。前期，我在用ZF做CMS時，我在.htaccess文件中設置了如遇到js,css,img等資源文件都不重定向。但今天在用CI時，卻忘記了，搞了很久都沒有出來，上了CI的中國官方網，終於在他們幫助下把問題觖決了，在這裡把它貼出來，供大家分享。

（另註：我這裡是隱藏了url中的index.php文件的，與不隱藏有所不同，但最終都是採用絕對URL）

首先，我在.htaccess文件里設置（作用是隱藏index.php），如下：

RewriteEngine on

RewriteCond $1 !^(index/.php|images|js|img|css|robots/.txt) #在這裡寫要排除的資源等

RewriteRule ^(.*)$ index.php/$1 [L]

我把JS,CSS,IMG等資源文件夾與SYSTEM文件夾放在同一級下，然後在JS文件夾中建立ajax.js文件，我在VIEW層中的文件為index.html。這樣我要引入JS時，如下：

script type=”text/javascript” src=”url/js/ajax.js’?”/script：注這裡url是你的網站絕對URL（絕對 URL，就是 這樣叫做絕對 URL）

到這裡就行了。當然為了可維護性，你也可以用CI自帶的BASE_URL來設置，如下：

進入 application/config/config.php文件，在config.php文件中設置base_url:

$config[‘base_url’] = ; //這裡是你的網站根目錄

設置好後 再controller某處

$this-load-helper(‘url’)，

然後再在VIEW層中具體頁面中引入即可：

script type=”text/javascript” src=’?=base_url().’js/Ajax.js’?’/script

好了，CI中引入外部的JS與CSS就這麼簡單.

注別的說明：「 RewriteCond $1 !^(index/.php|images|js|img|css|robots/.txt) 」這裡代碼的意思是：任意你想訪問的資源都不被重定向時，都可寫在這裡。有時，網站沒有載入CSS,JS（它的路徑都是正確的）時，都是被重定向了，這要注意.

謝謝採納

外部的js文件怎麼調用外部的css文件

var cssSource = document.createElement(‘link’);

link.href = “css/comm.css”;

document.getElementsByTagName(‘head’)[0].appendChild(cssSource);

在JS文件中調用外部CSS文件

JS文件中動態調用外部css, 文件方法如下:

function loadExtentFile(filePath, fileType){

if(fileType == “js”){

var oJs = document.create_rElement(‘script’);

oJs.setAttribute(“type”,”text/javascript”);

oJs.setAttribute(“src”, filename);//文件的地址 ,可為絕對及相對路徑

document.getElementsByTagName_r(“head”)[0].appendChild(oJs);//綁定

}else if(fileType == “css”){

var oCss = document.create_rElement(“link”);

oCss.setAttribute(“rel”, “stylesheet”);

oCss.setAttribute(“type”, “text/css”);

oCss.setAttribute(“href”, filename);

document.getElementsByTagName_r(“head”)[0].appendChild(oCss);//綁定

}

}

loadExtentFile(“js/func.js”, “js”);

loadExtentFile(“default.css”, “css”);

清空:

var lists = document.getElementsByTagName_r(“link”);

for ( var i = 0; i lists.length; i++) {

if (lists[i].getAttribute(“href”).indexOf(“.css”) != -1) == -1) {

lists[i].parentNode.removeChild(lists[i]);

}

}

上面的判斷語句中可以加入自己的判斷。

如何動態載入外部CSS與JS文件

動態載入外部css樣式及css樣式，參考代碼如下：

// 動態載入外部js文件 

var flag = true; 

if( flag ){ 

loadScript( “js/index.js” ); 

}; 

function loadScript( url ){ 

var script = document.createElement( “script” ); 

script.type = “type/javascipt”; 

script.src = url; 

document.getElementsByTagName( “head” )[0].appendChild( script ); 

}; 

// 動態載入js 

if( flag ){ 

var script = document.createElement( “script” ); 

script.type = “text/javascript”; 

script.text = ” “; 

document.getElementsByTagName( “head” )[0].appendChild( script ); 

}; 

// 動態載入外部css樣式 

if( flag ){ 

loadCss( “css/base.css” ); 

}; 

function loadCss( url ){ 

var link = document.createElement( “link” ); 

link.type = “text/css”; 

link.rel = “stylesheet”; 

link.href = url; 

document.getElementsByTagName( “head” )[0].appendChild( link ); 

}; 

// 動態載入css樣式 

if( flag ){ 

var style = document.createElement( “style” ); 

style.type = “text/css”; 

document.getElementsByTagName( “head” )[0].appendChild( style ); 

var sheet = document.styleSheets[0]; 

insertRules( sheet,”#gaga1″,”background:#f00″,0 ); 

}; 

function insertRules( sheet,selectorTxt,cssTxt,position ){ 

if( sheet.insertRule ){ // 判斷非IE瀏覽器 

sheet.insertRule( selectorTxt + “{” + cssTxt +”}” ,position ); 

}else if( sheet.addRule ){ //判斷是否是IE瀏覽器 

sheet.addRule( selectorTxt ,cssTxt ,position ) 

} 

}

怎樣把外部的 CSS樣式和JS文件，導入DW軟體中。

把外部的 CSS樣式和JS文件，導入DW軟體中，一般都是通過在DW中新建一個站點目錄，然後在設置一個文件夾，為站點的根目錄，然後在這個目錄中有個js和css的文件夾，包涵著文件，然後在DW的站點中，就能看到JS、css文件了，可以看下步驟截圖：

1.點擊站點-》新建站點，填寫好你的站點名字，文件路徑

2.然後點擊保存之後，這個目錄下的所有文件就都導入進來了，這樣就能到js和css文件了。

如何導入外部JS文件和Css文件求解

2.script language=”javascript” src=”myjs/xx.js”/script

這裡的/script不能丟，也不能寫成script type=”text/javascript” src=”myjs/xx.js”/這種形式，因為容易找不到外部js文件(src屬性同img的src)。注意：type是一個未來趨勢，在HTML 4 標準里並不贊成使用language屬性，而贊成使用type屬性。language屬性可以用來指定使用哪種腳本語言，而type屬性可以指定腳本語言的MIME類型。

從理論上而言，為腳本語言指定MIME類型比指定腳本語言名稱要科學得多，但事實上只有擁有w3cDOM性能（IE5+）的瀏覽器才支持type，不過都支持language屬性。但是畢竟已經不再推薦使用language屬性，所以最好還是使用type。############################ 導入外部css文件: ################################# link rel=”stylesheet” type=”text/css” href=”/css/mycss.css”/

rel、stylesheet屬性作用：首先，link標籤是用於當前文檔引用外部文檔的；

具體的值及其所表示的關係如下：