Change Your Stylesheet on "onclick" Event

Change Stylesheet Refreshing the Page - Javascript

1. Produce your link tag as follows

<link id="basestyle" href="default.css" media="all" type="text/css" rel="stylesheet"/>

2. Create the following function in your javascript (js) file

function changeStyle( themeName ){
document.getElementById( "basestyle" ).href= themeName+ ".css";
}

3. Create buttons that will call the "changeStyle" function on "onclick" event

<input type="button" value="default" onclick="changeStyle( this.value )" />
<input type="button" value="blue" onclick="changeStyle( this.value )" />
<input type="button" value="red" onclick="changeStyle( this.value )" />
<input type="button" value="green" onclick="changeStyle( this.value )" />

4. Thats it done.

Please download the sample script in the following URL:
http://www.maskitchen.in/sample/javascript-change-stylesheet-and-fontsize(onclick).zip
Featured Blog Topics:

• Xml in MySQL - http://kathyravan.blogspot.com/2008/03/xml-in-mysql.html
• Forgot mySQL root Password? - http://kathyravan.blogspot.com/2008/02/forgot-mysql-root-password.html
• Samba - Installation & Configuration - http://kathyravan.blogspot.com/2008/02/samba-installation-configuration.html
• Enabling HTTP Authentication in Apache - http://kathyravan.blogspot.com/2008/08/enabling-http-authentication-in-apache.html
• PHP Function: isFTPFileExists (Searching a FILE in FTP) - http://kathyravan.blogspot.com/2008/12/php-function-isftpfileexists-searching.html
• Shell Scripting & Linux - http://kathyravan.blogspot.com/search/label/Shell%20Scripts