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 Your Font Size on "onclick" Event

No comments :
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

No comments :