CancelImage Upload

How to change font height, weight and style using JavaScript getElementById()

GetElementById()'s talents are seemingly endless. While I have already discussed how this function can be used to change CSS Font Families, they can also be used to set style properties such as height, weight and font style. Here is how we can access these three properties:

//Here is how you can change font size.
//Remember to specify either px or pt!

function changeFontSize(fontSize)
{

document.getElementById("id_1").style.fontSize = fontSize;

}

//You can choose one of the following styles:
//-Normal
//-Italic
//-Oblique

function changeStyle(fontStyle)
{

document.getElementById("id_1").style.fontStyle = fontStyle;

}

//You can choose one of the following weights:
//-Lighter
//-Bolder
//600

function changeWeight(fontWeight)
{

document.getElementById("id_1").style.fontWeight = fontWeight;

}

Here is a more extended code example:

<html>
<head>
<title>Changing fonts with JavaScript</title>

<script language="JavaScript">

function changeFontSize(fontSize)
{

document.getElementById("id_1").style.fontSize = fontSize;

}

function changeStyle(fontStyle)
{

document.getElementById("id_1").style.fontStyle = fontStyle;

}

function changeWeight(fontWeight)
{

document.getElementById("id_1").style.fontWeight = fontWeight;

}

</script>

<style type="text/css">
<!--
body {
background:#CCCCFF;
text-align:center;
}

span {
color:000;
}

input { maring-right:5px;}

-->
</style>
</head>
<body>

<span id="id_1">Click on the buttons below to select a font size!</span><br>
<br>
<input type="button" value="9" onclick="changeFontSize('9pt')"/>
<input type="button" value="13" onclick="changeFontSize('13pt')"/>
<input type="button" value="17" onclick="changeFontSize('17pt')"/>
<input type="button" value="21" onclick="changeFontSize('21pt')"/>
<br><br>

<input type="button" value="Bolder" onclick="changeWeight('bolder')"/>
<input type="button" value="Lighter" onclick="changeWeight('lighter')"/>
<input type="button" value="600" onclick="changeWeight('600')"/>
<br><br>

<input type="button" value="Normal" onclick="changeStyle('normal')"/>
<input type="button" value="Italic" onclick="changeStyle('italic')"/>
<input type="button" value="Oblique" onclick="changeStyle('oblique')"/>

</body>
</html>


Login
Want to leave a comment?

No problem. Just enter your email and password below.


register | home | reminder

From Linh Vu at 09:13:32 on the 14/02/2011.
Do u have example for this post ?
myDesignTool Networking • www.mydesigntool.cominfo@mydesigntool.com