Example
1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example 1</title>
<style>
#example1 { color:#0099CC; }
</style>
</head>
<body>
<div id="example1">
<input type="button"
onclick="document.getElementById('example1').style.fontSize='32px';"
value="*1*"
/>
HI
THERE
</div>
</body>
</html>
Example
2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>Example 2</title>
<style> #example1 { color:#0099CC; } </style>
<script language="javascript"
type="text/javascript">
function
resizeText(multiplier)
{
if
(document.body.style.fontSize
==
"")
{
document.body.style.fontSize
=
"1.0em";
}
document.body.style.fontSize
= parseFloat(document.body.style.fontSize) +
(multiplier
*
}
function
resetText() {
document.body.style.fontSize
=
"1.0em";
document.getElementById('example1').style.fontSize = '12px';
}
</script>
</head>
<body>
<h2>Page Header</h2>
<div id="example1">
<input type="button" onclick="resizeText(2.0)"
value="*2*" />
<input type="button" onclick="resetText()"
value="*3*" />
HI
THERE
</div>
</body>
</html>
Example
3:
<!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">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Example 3</title>
</head>
<body>
<img id="die" src="1.jpg">
<input type="button" onclick="document.getElementById('die')
</body>
</html>
Example
4:
<!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">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Example 4</title>
</head>
<body>
<img id="die" src="1.jpg" onmouseover="document.getElementById('die')
<p id="roll_value"></p>
</body>
</html>
Example
5:
<!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">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Example 5</title>
<script>
var theRoll =
</script>
</head>
<body>
<img id="die" src="1.jpg" onmouseover="theRoll=Math.floor(1+Math.random()
+
'.jpg';document.getElementById('roll_value').innerHTML='The
roll value is: ' +
theRoll">
<p style="font-size=24px" id="roll_value"></p>
</body>
</html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>JavaScript DOM Examples</title>
<style>
#example1
{
font-size:12px;
font-family:"Courier New", Courier, monospace;
}
</style>
<script language="javascript"
type="text/javascript">
function resizeText(multiplier) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
function resetText() {
document.body.style.fontSize = "1.0em";
document.getElementById('example1').style.fontSize = '12px';
}
function showSelected(form)
var selObj = document.getElementById('category');
var selIndex = selObj.selectedIndex;
form.searchll.value = selObj.options[selIndex].text;
}
function $(element) {
return document.getElementById(element);
}
</script>
</head>
<body>
<h2
class="content_heading">JavaScript DOM
Examples</h2></center>
<br />
<form
method="get" id="llsearch" action="#">
<table
class='linklisttable' border='0'><tr><td
valign="top"><table><tr><td>Type:
</td><td><select name="category"
id="category" onchange="showSelected(this.form);">
<option
value="0" selected="selected">All</option>
<option
value="1">PDF Documents</option>
<option
value="2">Books</option>
<option
value="3">Videos</option>
<option
value="4">Websites</option>
<option
value="5">Presentations</option>
<option
value="6">Other</option>
</select></td><td>
<div>
<input
type="text" name="searchll" id="searchll"
value="Search..." />
<input type='hidden'
value='89' name='page_id' id='page_id' />
<input type='submit'
value='Search' />
</div>
</td></tr></table></td></tr></table>
</form>
<!--search code starts
here-->
<div
id="examples" name="examples">
<div id="example1">
<input type="button" onclick="document.getElementById('example1').style.fontSize
<input
type="button" onclick="resizeText(2.0);" value="*2*" />
<input
type="button" onclick="resetText();"
value="*3*" /><br/>
<script language="javascript"
type="text/javascript">
document.write('Browser: ' + navigator.appName + '<br />');
document.write('Version: ' + navigator.appVersion + '<br />');
document.write('Location: ' + document.location);
</script>
</div>
<div id="example2">
<input
type="button" onclick="document.getElementById('choice').innerHTML='no choice';" value="*1*" />
<input
type="button" onclick="var selIndex=document.getElementById('category').selectedIndex;
document.getElementById('choice').innerHTML=document.getElementById('category').options[selIndex].text;"
value="*2*"
/>
<p
id="choice"></p>
</div>
<div id="example3"
name="example3">
<input
type="button" onclick="document.die.src='2.jpg';" value="*1*" />
<input
type="button" onclick="document.die.src=Math.floor(1+Math.random()*6) + '.jpg';" value="*2*" />
<input
type="button" onclick="$('die').src='6.jpg';"
value="*3*" />
<input
type="button" onclick="$('die').width='48';"
value="*4*" />
<img
id="die" src="1.jpg">
</div>
</div>
</body>
</html>