JavaScript – Change CSS class dynamically

 

CSS classes play good role in presentation of HTML and content display. CSS class can be changed by JavaScript function. We have to use either JavaScript event or HTML loading runtime.

JavaScript events are onClick, onMouseOver, onMouseOut, onChange functions, can call to change CSS classes dynamically.

In CSS class can change dynamically font face, font color, background color, style, and decoration of the HTML content.

Demo

<html>
<head>
  <title>Change CSS Classes dynamically in JavaScript</title>
 <style>
 .mOver
 {
   background-color:#ABE278
 }
 .mOut
 {
   background-color:#F0D8F1
 }
 </style>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td onMouseOver="this.className='mOver'" onMouseOut="this.className='mOut'">
	  Change CSS Classes
	   </td>
  </tr>
  <tr>
    <td onMouseOver="this.className='mOver'" onMouseOut="this.className='mOut'">
	  Change CSS Classes
	   </td>
  </tr>
  <tr>
    <td onMouseOver="this.className='mOver'" onMouseOut="this.className='mOut'">
	   Change CSS Classes
	   </td>
  </tr>
  <tr>
    <td onMouseOver="this.className='mOver'" onMouseOut="this.className='mOut'">
     Change CSS Classes
    </td>
  </tr>
</table>
</body>
</html>

 

One Response to “JavaScript – Change CSS class dynamically”

  1. khiliji says:

    Thank You For Giving This Code