動態載入css的兩種實現思路（js和伺服器端)(downmoon)

動態載入css的實現思路，目前想到有兩種：

一、js

參考http://blog.csdn.net/qsdnet/archive/2006/12/31/1470891.aspx

主要內容如下：

第一種：一般用在外部CSS檔案中載入必須的檔案

 程式碼

@import url(style.css);

/*只能用在CSS檔案中或者style標籤中*/

第二種：簡單的在頁面中載入一個外部CSS檔案

程式碼

document.createStyleSheet(cssFile);

第三種：用createElement方法建立CSS的Link標籤

程式碼

var head = document.getElementsByTagName('HEAD').item(0);

var style = document.createElement('link');

style.href = 'style.css';

style.rel = 'stylesheet';

style.type = 'text/css';

head.appendChild(style);

這裡貼上我以前在項目中使用的幾個函數，希望對大家有用！

程式碼

function loadJs(file){

    var scriptTag = document.getElementById('loadScript');

    var head = document.getElementsByTagName('head').item(0);

    if(scriptTag) head.removeChild(scriptTag);

    script = document.createElement('script');

    script.src = "../js/mi_"+file+".js";

    script.type = 'text/javascript';

    script.id = 'loadScript';

    head.appendChild(script);

}

function loadCss(file){

    var cssTag = document.getElementById('loadCss');

    var head = document.getElementsByTagName('head').item(0);

    if(cssTag) head.removeChild(cssTag);

    css = document.createElement('link');

    css.href = "../css/mi_"+file+".css";

    css.rel = 'stylesheet';

    css.type = 'text/css';

    css.id = 'loadCss';

    head.appendChild(css);

}

二、伺服器端實現變數載入

也在兩種方法：

（一）直接使用變數

<
head 
runat
="server"
>

    
<
title
></
title
>

    
<
script 
language
="javascript"
 src
="<%=url%>/js/jquery.js"
></
script
>

    
<
script 
language
="javascript"
 src
="<%=url%>/js/jquery-impromptu.2.7.min.js"
></
script
>

    
<
link 
type
="text/css"
 rel
="stylesheet"
 href
='<%=url 
%
>
/css/css.css' />
    
<
link 
type
="text/css"
 rel
="stylesheet"
 href
="<%=newurl %>/css/css.css"
 
/>


</
head
>

（二）使用link的runat="server"屬性，使其變成伺服器控制項

 

<link id="myPageCssPath" runat="server" rel="stylesheet" type="text/css" />

 

 後台代碼：

 

protected HtmlGenericControl myPageCssPath;<br /> myPageCssPath.Attributes["href"] = ".";

 

助人等於自助!   3w@live.cn