Kathiravan Manoharan

An Entrepreneur, Coach, IT Consultant, Strategic Adviser, and a Traveler craving to explore and contribute to forming a better society.

Thursday, August 20, 2009

Change Stylesheet and Font Size (On Click) Without Refreshing the Page - Javascript

Kathiravan Manoharan 5:35:00 PM , No comments :
Change Stylesheet and Font Size (On Click) Without Refreshing the Page - Javascript

Change your Stylesheet on "onclick" event

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.

Change your Font Size on "onclick" event

1. Create style for your body tag as follows:
body{
font-size: 100%;
}

2. Create your body tag as follows (having id as xbody):
<body id="xbody">
</body>

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

function changeFontSize( size ){
document.getElementById( "xbody" ).style.fontSize = size+ "%";
}

4. Create buttons that will call the "changeFontSize" function on "onclick" event

<input type="button" value="Small" onclick="changeFontSize( 100 )" />
<input type="button" value="Large" onclick="changeFontSize( 120 )" />
<input type="button" value="Extra Large" onclick="changeFontSize( 160 )" />

5. 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:

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Books

Food

Contact Form

Name

Email *

Message *