NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!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" lang="en">
<head>
<title>CSS via the DOM Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#d1 {font-style: italic;
 font-size: 36pt;
 border-style: solid;
 border-width: 1px;
 width:80%;
 text-align: center;}
</style>

<script type="text/javascript">
<!--
function changeStyle()
{
var theElement = document.getElementById('d1');
theElement.style.fontStyle='normal';
theElement.style.fontSize='12pt';
theElement.style.borderStyle='dashed';
theElement.style.borderWidth='3px';
theElement.style.backgroundColor='yellow';
theElement.style.textAlign='left';
}
function show()
{
var theElement = document.getElementById('d1');
theElement.style.visibility='visible';
}
function hide()
{
var theElement = document.getElementById('d1');
theElement.style.visibility='hidden';
}
//-->
</script>
</head>
<body>

<div id="d1">CSS Test</div>

<hr />

<form action="#">
<input type="button" value="change" onclick="changeStyle();" />
<input type="button" value="hide" onclick="hide();" />
<input type="button" value="show" onclick="show();" />
</form>

</body>
</html>

CLOSE WINDOW | VIEW RENDERED PAGE