<!-- JavaScript:DOM code snippet 1. -->
<!-- Reference and gain access to a node or element directly
with the 'document.getElementById()' method. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
/* Function to increase the size of the text in the named
element ID by a factor of 4 */
function textEnlarge(element){
/* declare a variable and assign a value */
var t = document.getElementById(element)
/* combine with the Style object property 'fontSize'
and relative units 'em' */
t.style.fontSize="4em"
}
</script>
</head>
<body>
<form name="textEnlargeForm" id="textEnlargeForm">
<!-- calls function when button is clicked -->
<input type="button" value="Click me to enlarge text" onclick="textEnlarge('para')" />
</form>
<p id="para">
This page demonstrates how we can use the 'getElementById()'
method to enlarge text within a web page.</p>
</body>
</html>