PHP Excel Report: Text Position in Excel Cell »

AJAX - Client Side: JavaScript, DOM, and CSS

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>

Database Tutorial

Security Tutorial

Framework Tutorial

Template Tutorial

API Tutorial

Learn Facebook

JS Framework Tutorial

AJAX Tutorial

Web Services Tutorial

Package Post