ケース1スタイルの操作

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
  < メタ文字コード= "UTF-8" > 
  < タイトル>ドキュメント</ タイトル> 
  < スタイル> 
    の.cls { 
      幅：100pxに。
      高さ：100pxに。
      背景色：赤。
    } 
  </ スタイル> 
</ ヘッド> 
< 身体>
  入力タイプ= "ボタン" ID = "BTN" 値= "点我" >  < BR > 
  < DIV ID ="ボックス" > </ DIV >  

  < スクリプトSRC = "common.js" > </ スクリプト> 
  < スクリプト> 
    // スタイルを操作し、使用するクラススタイルの使用スタイル？
    // クラススタイル簡単に使用するスタイルプロパティ、複数の場合は
    //をスタイルを使用する方が便利であるときのスタイルプロパティを設定する場合は比較的小さい
    //  
    //  
    //  
    // クラス1つのスタイル
    // マイ$（「BTN」）。onclickのを機能=（）{ 
    //    マイ$（ 'ボックス'）className 'のCLS' ;. = 
    //を} 
    // スタイル使用して2 
    マイ$（' BTN ' ）.onclick =  関数（）{
       // 幅と高さを設定するときユニットが取らなければならないとき、単位なしの場合は、エラー
      のvar ボックス=私の$（' ボックス' ）;
      box.style.width =  ' 200pxの' ;
      box.style.height =  ' 200pxの' ;
      box.style.backgroundColor =  ' 赤' ;
    }


  </ スクリプト> 
</ ボディ> 
</ HTML >

内部の共通コード

{私の$（id）を機能
  document.getElementById（ID）を返します。
}