iEntry 10th Anniversary CSS Snippets JavaScript Snippets

 
 





Changing Font Sizes

There are some sites on the web that allow users to change their font size. This allows their site to be read by users who may have a hard time reading the default font size, and their site is more user friendly because of this feature. This can be done by using the font-size property in CSS. 

<script language="JavaScript" type="text/javascript">
function fontSize(size){
	document.getElementById("body").style.fontSize = size
}
</script>
<body id="body">
Select a font size:
<select name=fontChanger onchange="fontSize(this.value)">
 <option value="8">8</option>
 <option value="10">10</option>
 <option value="12">12</option>
 <option value="14">14</option>
 <option value="16">16</option>
 <option value="18">18</option>
 <option value="20">20</option>
</select>
<div id="comments">
This is some text, which can have the size changed.
</div>

First thing we do is create a JavaScript function. This function, named fontSize, is asking that a value be passed to it, and then uses this value to change the font-size style of the element titled body. We then start the body of the document, and give the body tag the id body. After this we create a drop down menu with different font sizes that we would like the user to select from if they want to change the default font size. In the select tag, we also have the JavaScript even onchange. This event called for the fontSize function, and passes the value of the option in the drop down menu to the function.