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>
Bookmark  

 

Leave a Reply

Security Code:

 

  Random Post