javascript+css無重新整理實現頁面樣式的更換

來源:互聯網
上載者:User

如果要更換頁面的主題,只能是放在Page_PreInit事件裡,而這個事件一般都要經過重新整理才會執行,所以這就導致效率下降,使用者體驗也會跟著下降。

下面我將介紹一下關於Javascript+CSS的解決辦法:

首先建立一個html檔案,代碼如下:

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4 <title>無重新整理更改頁面樣式</title>
5 <link id="theme" href="red.css" rel="Stylesheet" type="text/css" />
6  </head>
7  <body>
8 <div>這是頁面的文字</div>
9 <input id="btnChangeRedTheme" type="button" value="red" />
10 <input id="btnChangeBlueTheme" type="button" value="blue" />
11 </body>
12 </html>

 

接下來就是通過button的單擊事件來更改link標籤中的href屬性了,以下是jQuery代碼,用Javascript實現也很簡單,由於鄙人熱衷於jQuery,所以請大家諒解:)

 

 

1 <script type="text/javascript">
2 $(document).ready(function(){
3 $('#btnChangeRedTheme').click(function(event){$('#theme').attr('href','red.css');});
4 $('#btnChangeBlueTheme').click(function(event){$('#theme').attr('href','blue.css');});
5 });
6 </script>

 

就這樣大功告成了,很簡單吧。

 

至於blue.css和red.css兩個檔案怎麼寫,就發揮您的聰明才智吧!

拓展:

  如果您的某個主題裡面有很多CSS檔案的話,您可以將主題裡這些檔案的名字都取相同的,然後建立各個主題的檔案夾,如blue,red…

要更換主題的話,只要替換掉所有link標籤href屬性裡的檔案夾字串,如href='blue/theme.css',只需將blue替換為red,即href='red/theme.css'。

 

http://www.cnblogs.com/mapping/archive/2010/10/27/1863052.html

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.