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

className Example JavaScript (JS)

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

Syntax: object.className=name – Allows you to retrieve or assign className.

className Example JavaScript (JS) 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
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Anchor 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>