AJAX Client Side Step By Step Tutorial - part 5: Previous post, we talk about using event JavaScript. Now, we will continue with how this event impact to css. As you know, css we use to control our layout.
For practice, we will make simple table. With button, we can control background color of the table. I write simple code like below. I believe, you can understand without extend explain.
<!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>JavaScript, DOM, CSS</title>
<script language="javascript1.1">
function Orange(){
aTable = document.getElementById("table")
aTable.className = "orangestyle";
}
function Blue(){
aTable = document.getElementById("table")
aTable.className = "bluestyle";
}
function Red(){
aTable = document.getElementById("table")
aTable.className = "redstyle";
}
</script>
<style type="text/css">
.orangestyle{
background-color:#FF6600;
}
.bluestyle{
background-color:#0000CC;
}
.redstyle{
background-color:#FF0000;
}
</style>
</head>
<body onload="Orange()">
<table id="table">
<tr>
<td>
Hai, You can change my color by click below.
</td>
</tr>
</table>
<br>
<input type="button" value="Blue" onclick="Blue()">
<input type="button" value="Red" onclick="Red()">
</body>
</html>
