Dynamically Change Style of a Page.


i-Vibe.com developer resource & tips portal

Newsflash

01/27/06: I just had some time to cleanup this website. I will add more articles for AJAX this coming weekend.

Main Menu

Related Articles

Home

Programming

CSS

Dynamically Change Style of a Page.

Currently 1.0/5 Stars.
1
2
3
4
5

Rating: 1.0/5 (1 votes cast)

Written by Roceller Alvarez

Saturday, 26 February 2005

The code dynamically change basic font properties based on the selected value on the dropdown options.

<html>
<head>
<title>i-Vibe.com</title>
</head>
<body>
This is i-Vibe!<br>
<div id="dynamicStyle">This is i-Vibe! (this part will change style) <br></div>
This is i-Vibe!<br>
<form name="changer">
<select name="fontChange" onChange="if(this.selectedIndex!=0) document.getElementById('dynamicStyle').style.fontFamily=this.options[this.selectedIndex].value;">
<option>please select font</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Comic sans ms">Comic sans ms</option>
</select>
<select name="sizeChange" onChange="if(this.selectedIndex!=0) document.getElementById('dynamicStyle').style.fontSize=this.options[this.selectedIndex].value;">
<option>please select size</option>
<option value="8pt">8 pt</option>
<option value="12pt">12 pt</option>
<option value="16pt">16 pt</option>
</select>
</form>
</body>
</html>

Comments

Only registered users can write comments.
Please login or register.

[ Back ]