PDA

View Full Version : changing the font of a text area

Bluemonkey
05-09-2003, 05:54 PM
i have this at the monet but it keep sgiving me an error and i think its the "-" in between font and family what do i put there in stead

<a href="#" onClick="javascript:changefont('Times New Roman');">Times New Roman</a>

<script language="JavaScript">
<!--

function changefont(text) {

document.textselect.fontclass.value = text;
document.textselect.messagebox.style.font-family=text;
}

-->
</script>


thanks for the help
Philip M
05-09-2003, 06:18 PM
document.textselect.messagebox.style="font-family:text";
arnyinc
05-09-2003, 06:27 PM
I'm not sure about fontclass. I'm guessing that's for another browser (opera?), but I don't have anything to test that with. I think it's usually camel case for style changing in javascript. This works in IE and Mozilla for me.

<html>
<head>

<script language="JavaScript">
<!--

function changefont(text) {
document.myform.textselect.style.fontFamily=text;
}

-->
</script>
</head>
<body>

<a href="#" onClick="javascript:changefont('Times New Roman');">Times New Roman</a>
<form name="myform">
<textarea name="textselect"></textarea>
</form>
</body>
</html>
Bluemonkey
05-09-2003, 06:30 PM
thanks for the help
requestcode
05-09-2003, 06:47 PM
Here is another example:
<html>
<head>
<title>Form Font</title>
<script language="JavaScript">
function changeFont(selfont)
{
elm=document.getElementById("txt1")
elm.style.fontFamily=selfont
elm.style.color="blue"
}
</script>
</head>
<body>
<form name="myform">
<center>
<textarea id="txt1" style="font-family:Ariel;color:red;" rows="10" cols="40">Test text</textarea>
<br><br>
</form>
<a href="javascript:changeFont('Verdana')">Verdana</a>
<a href="javascript:changeFont('Courier')">Courier</a>
</center>
</body>
</html>
Bluemonkey
05-11-2003, 12:23 AM
cheers for the example i will give it a go
Roy Sinclair
05-12-2003, 03:12 PM
The simple rule to follow when converting CSS names to Javascript names is that because Javascript doesn't support "-" as a character for use in names you must remove the "-" and capitalize the next character.

For example:

CSS: font-family Javascript: fontFamily
CSS: text-decoration Javascript: textDecoration
Bluemonkey
05-12-2003, 03:20 PM
cheers for that Sinclair that will come in handy