Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old October 15th, 2004, 02:40 AM
Authorized User
Join Date: Oct 2004
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Default How a user can change font styles and sizes

font=Comic Sans MSHow a user can change a sites apperance(font styles and sizes) by choosing alternatives from a checkbox?][/font=Comic Sans MS]

Old October 15th, 2004, 05:17 AM
joefawcett's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts

You need to modify the content's container's style object:
<title>Change Appearance</title>
<script type="text/javascript">

function changeFontFamily(FontFamily)
  var oElement = document.getElementById("divBody"); 
  changeStyleAttribute(oElement, "fontFamily", FontFamily);

function changeFontSize(FontSize)
  var oElement = document.getElementById("divBody"); 
  changeStyleAttribute(oElement, "fontSize", FontSize);

function changeStyleAttribute(Element, Attribute, Value)
  Element.style[Attribute] = Value;

<select onchange="changeFontFamily(this.options[this.selectedIndex].value);">
<option value="Times New Roman" selected>Times New Roman</option>
<option value="Tahoma">Tahoma</option>
<option value="Book Antiqua">Book Antiqua</option>
<option value="Arial">Arial</option>
<option value="Webdings">Webdings</option>

<select onchange="changeFontSize(this.options[this.selectedIndex].value);">
<option value="6pt">6 point</option>
<option value="10pt">10 point</option>
<option value="14pt" selected>14 point</option>
<option value="18pt">18 point</option>
<option value="22pt">22 point</option>

<div id="divBody" style="font-family: Times New Roman; font-size:14pt;">
This is some text that can be changed by choosing different options from the two select boxes above.


Old October 15th, 2004, 06:01 AM
Authorized User
Join Date: Oct 2004
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts

Nice!!!!!!I was trying to do the same but for some reason couldn't make it to work..
Thanxs a lot Joe!!!!!!

Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML 4.0 vs. XHTML 1.0 and font sizes Ron Howerton HTML Code Clinic 4 October 14th, 2008 07:05 AM
MessageBox Font change vgsgowrisankar C# 2005 5 April 8th, 2008 04:10 AM
How to change font using winspool FileFound Visual Studio 2005 0 July 9th, 2007 04:57 AM
font sizes in multiselect list mat41 CSS Cascading Style Sheets 2 June 3rd, 2007 06:30 PM
change styles of text Box conditionally using CSS toshi CSS Cascading Style Sheets 1 May 26th, 2006 08:49 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.