Javascript DOM HTML Attribute set

Description

Javascript DOM HTML Attribute set

View in separate window 


<!DOCTYPE html>
<html>
<head>
   <title>Creating a Mouseover Effect</title>
   <style type="text/css">
      .Normal {color: red;font-style: italic;font-family: sans-serif;}
      .Selected {color: blue;font-weight: bold;font-family: cursive;}
   </style>
   //www.ja  va 2  s.c o m
   <p id="demo"></p>
   <script language="JavaScript">
      function SayHello()
      {
         document.getElementById("demo").innerHTML = "Hello There!";
      }
      
      function ChangeDisplay(Id, Class)
      {
         // Change the class of the specified
         // element or control to a new value.
         document.getElementById(Id).setAttribute(
            "class", Class);
      }
   </script>
</head>

<body>
   <h1>Creating a Mouseover Effect</h1>
   <input id="btnClick"
          class="Normal"
          type="button"
          value="ClickMe"
          onmouseover="ChangeDisplay('btnClick', 'Selected')"
          onmouseout="ChangeDisplay('btnClick', 'Normal')";
          onclick="SayHello()" />
</body>
</html>



PreviousNext

Related