Cascading Style Sheets Tutorial

  / / JavaScript Document 
  Function getcolor () 
  (… 
  Var s = ""; 
  S +=("< div class = 'color'>"); 
  S +=("< div style = 'height: 40px ;'>"); 
  S +=("< table> <tr> <td> <div id='ccc' style='width:100px;height;40px;background-color:#000000;'> </ div> "); 
  S +=("</ td> <td> <input type='text' id='cc' size='10' value='#000000'/> </ td> </ tr> </ table> ") ; 
  S +=("</ div> "); 
  S +=("< div class = 'bcolor'> <table cellspacing='0' cellpadding='0'> <tr> "); 
  For (var r = 0; r <= 15, r + = 3) 
  (… 
  If (r = 9) 
  S +=("</ tr> <tr> "); 
  S +=("< td> "); 

  S +=("< table cellspacing ='0 'cellpadding ='0'>"); 
  For (var b = 0; b <= 15; b + = 3) 
  (… 
  S +=("< tr> "); 
  For (var g = 0; g <= 15; g + = 3) 
  (… 
  / / If (b == 9) s +=("</ tr> <tr> "); 
  Var rr = r.toString (16); 
  Rr rr + =; 
  Var bb = b.toString (16); 
  Bb + = bb; 
  Var gg = g.toString (16); 
  Gg + = gg; 
  S + = "<td class = 'ctd' onmousemove = 'movecolor ("#"+ rr + gg + bb +"")'"; 
  S + = "onclick = 'setcolor ("#"+ rr + gg + bb +"")' style =' border: 1px solid # 000"; 
  S + = "background-color: #" + + gg + bb rr +";'>"; 
  S +="</ td> "; 

  ) 
  S +=("</ tr> "); 
  ) 
  S +=("</ table> "); 
  S +=("</ td> "); 


  ) 
  S +=('</ tr> </ table> </ div> </ div> '); 
  Return s; 
  ) 
  Function getobj (id) 
  (… 
  Return document.getElementById (id); 
  ) 
  Function movecolor (color) / / Mouse over the operation of a certain color 
  (… 
  Getobj ( "ccc"). Style.backgroundColor = color; 
  Getobj ( "cc"). Value = color; 

  ) 
  Function setcolor (color) / / mouse click after the operation of a color 
  (… 
  Getobj ( "colordiv"). Style.backgroundColor = color; 
  Getobj ( "cccc"). Style.display = "none"; 
  ) 

  Test.html test