Javascript-access externally defined CSS styles (Class-defined CSS styles)

Event3.css

 
. Mydiv{Width:600px;Height:400px;Background-color:Red;}
 

Event3.html

 <  Html  >  <  Head  >  <  Link  REL  = "Stylesheet" Type  = "Text/CSS"  Href  = "Event3.css"  >  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  >  <! --  JSCodeIt can be placed in any location and executed sequentially. Generally, it is placed between head labels.  --> <  Script  Type  = "Text/JavaScript"  >          Function  Test () {window. Alert (  New  Date (). tolocalestring ());}  //  Access externally defined CSS styles (Class-defined CSS styles)      Function Test2 (eventobj ){  //  All class selectors in event.css get          //  Note: Mozilla and safasi use cssrules, while ie uses rules.          VaR  Ocssrules  =  Document. stylesheets [  0  ]. Rules; //  Get the class you need from ocssrules          VaR  Mydiv  =  Ocssrules [  0  ];  //  This 0th is the first rule in the event3.css file.          If (Eventobj. Value  =  "  Black  "  ){  //  Identify operations by ID              VaR  Div1  = Document. getelementbyid (  "  Div1  "  ); Div1.style. backgroundcolor  =  "  Black  "  ;}  Else  If  (Eventobj. Value  =  "  Red  "  ){  VaR  Div1  =  Document. getelementbyid ( "  Div1  "  );  //  Div1.style. Background-color = "balck"; // This is an error.  Div1.style. backgroundcolor  =  "  Red  " ;}}  </  Script  >  </  Head  >  <  Body  >      <  Input  Type  = "Button"  Value  = "Click to display time"  Onclick = "Test ()"   />      <  Div  ID  = "Div1"  Class  = "Mydiv"  >              </  Div  >      <  Input  Type  = "Button"  Value = "Black"  Onclick  = "Test2 (this )"  />      <  Input  Type  = "Button"  Value  = "Red"  Onclick  = "Test2 (this )"  />  </  Body  >  </ Html  >