Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links

Home

News

Presenters

Contact

Please login

JavaScript (JS) className Example

Description: Illustrates the JavaScript syntax for the Area Object className Property .

Syntax: AreaObject.className – Allows you to add className to an AreaObject

JavaScript (JS) className Example Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: className </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
    -->
    <style type="text/css" id="myStyle" >
 
       .myButtons
        {
            font-size:large;
        }
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton3
        {
            background-color:#d0e4fe;
        }
 
 
    </style>
 
 
   </head>
  <body>
      <input id="Button1" type="button" class="myButtons" value="button" /><br /><br />
      <input id="Button2" type="button" class="myButton2" value="button" /><br /><br />
      <input id="Button3" type="button" class="myButton3" value="button" /><br /><br />
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Area Object - Standard Properties   ***
       //*****************************************************
 
       //*****************************************************
       // className
       //*****************************************************
 
       //    SYNTAX:
       //    object.className=name  Allows you to retrieve or assign className
 
       // Two ways to retrieve className   
       //   1. GetElementsByTagName
            myObject=document.getElementsByTagName('input')[0];
            document.write("Using getElementsByTagName: " + myObject.className);
            document.write("<br />");
      //   2. GetElementById
            document.write("Using getElementById: ");
            document.write(document.getElementById('Button1').className);
 
 
       // Two ways to assign className
 
       //   1. GetElementById
            document.getElementById('Button2').className = "myButton2"
       //   2. GetElementsByTagName      
            myThirdButton = document.getElementsByTagName('input')[2];
            myThirdButton.className = "myButton3";
 
</script>
 
  </body>
</html>