Use JavaScript + CSS to change the page style without refreshing

If you want to change the page topic, you can only place it in the page_preinit event. This event is generally executed only after being refreshed, which leads to lower efficiency and lower user experience.

Next I will introduce the solutions for JavaScript + CSS:

First, create an HTML file,CodeAs follows:

 

  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  >  Refreshing and changing page styles </  Title  >  
  5     <  Link  ID  = "Theme"  Href  = "Red.css"  REL  = "Stylesheet"  Type  = "Text/CSS"    />  
  6      </  Head  >  
  7      <  Body  >  
  8   <  Div  > This is the text of the page.  </  Div  >  
  9   <  Input  ID  = "Btnchangeredtheme"  Type  = "Button"  Value  = "Red"     />  
 10   <  Input  ID  = "Btnchangebluetheme"  Type  = "Button"  Value  = "Blue"     />  
  11   </  Body  >  
 12   </  Html  >  
 

 

The next step is to change the href attribute in the link tag through the Click Event of the button. The following is the jquery Code. It is also very easy to implement with JavaScript. As you are keen on jquery, please forgive me :)

 

 

  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> 

 

That's all. It's easy.

 

To learn how to write two files: blue.cssand red.css, use your talents!

Expansion:

If you have many CSS files in a topic, you can name these files in the same topic and create folders for each topic, such as blue, red...

To replace a topic, replace the folder strings in the href attribute of all link labels, such as href = 'Blue/theme.css 'and replace blue with red, that is, href = 'Red/theme.css '.

 

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