Actionクラス

  1  <！DOCTYPE HTML > 
  2  < HTML > 
  3  < ヘッド> 
  4      < メタのcharset = "UTF-8" > 
  5      < タイトル> </ タイトル> 
  6  </ ヘッド> 
  7  < スクリプトタイプ= "テキスト/ javascriptの" > 
  8  window.onload = 関数（）{
   9  VARのボックス= のdocument.getElementById（" ボックス" ）。
 ボタン1 = のdocument.getElementById（「Button1を」）;
 11  button1.onclick = 関数（）{
 12は / * 
13は、 箱のスタイル変更するために
 14を 各スタイルを変更、スタイル要素のスタイルプロパティによって変更され、ブラウザが再レンダリングする必要がありますページ
 15  、このようなパフォーマンスの低下のが行われ、我々は複数のパターンを変更する場合は、このフォームは、非常に便利ではありません
 16  ボックスに変更されたクラス属性
 17  、我々はクラス属性要素変更することで、間接的にスタイルを変更することができる
 18の ようにその結果、我々は一度だけ変更する必要がある、あなたは、同時に複数のスタイルを変更することができます
 19  のみ再び再レンダリングページに必要な、パフォーマンスが優れているブラウザを、
 20  とこのように、パフォーマンスとさらなる分離を行うことができる
 21  * / 
22  //を= box.style.width "2000px"; 
23は、 VaRのB2 =document.getElementById（" B2 " ）;
 24  // 上書きするB2 B1のスタイル
25  // box.className = "B2"を、
26である // B2、B3は、パターン有する
27  // box.className + = "B3"を; 
28  // 。addClass（ボックス、B3）; 
29  // アラート（hasClass（ボックス、 "B2"））; 
30  // removeClass（ボックス、 "B2"）; 
31である // 。addClass（ボックス、 "B4"）。
32  アラート（hasClass（ボックス、" B4 " ））;
 33は 
34であり、 IF （hasClass（ボックス、" B4 "））
 35 removeClass（ボックス、" B4 " ）
 36は、 他の
37  。addClass（ボックス、" B4 " ）;
 38である 
39  ;}
 40  };
 41である 
42れる / * クラス属性要素に指定された値を追加するための関数を定義する
 43個 のパラメータを
 44は、 要素を追加するOBJクラス属性
 45の 値を追加するために、CNクラス
 46である * / 
47  機能。addClass（OBJ、CN）
 48  {
 49  // CN含むチェックOBJか否
50  のiF （！hasClass（OBJ、CN））
 51である OBJ .className + = " 「+ CN;
 52である }
 53で 
ある54  / * 
55は 、それが指定されたクラス属性値が含まれているかどうかの要素を決定する
 56  クラスは、それがtrueを返す場合、falseを返す
 57はしない * / 
58  関数hasClass（OBJ、CN）{
 59  / * 
60が ないOBJクラスCNが存在しない決定
 61である 正規表現を作成するために
 62である * / 
63である // VAR REG = / \のBB2の\のB /;そのようなダイを書き込む、コンストラクタによる方法
64  VAR REG = 新しい新しい正規表現（" \\ B " + CN + " \\ B " ）;
 65  リターン（obj.className）reg.test
 66  }
 67  
68  / * 
69  指定された要素のクラス属性を削除し
 70  * / 
71である 関数removeClass（OBJ、CN）{
 72  // 正規表現の作成
73は VaRのREG = 新しい新正規表現（" \\のB " + CN + " \\ B " ）;
 74  // 削除クラス
75  obj.className = obj.className.replace（REG、"" ）;
 76  }
 77  
78  / * 
79 toggleClassクラススイッチするために使用することができる
 80を 次に除去、要素がクラスを有する場合
 81を そのような要素が存在しない場合追加し、
 82  * / 
83  機能をtoggleClass（OBJ、CN）
 84  {
 85  IF （hasClass（OBJ、CN））
 86の removeClass（OBJ、CN）;
 87  他
88  addClass（OBJ、CN）;
 89  }
 90    </ スクリプト> 
91である < スタイルタイプ= "テキスト/ CSS" > 
92  .b1 { 
93  幅：100ピクセル、
94  高さ：100pxに。
95  背景色：赤。
96  } 
97  .b2 { 
98  幅：200pxの。
99  高さ：200pxの。
100  背景色：黄色。
101  } 
102  .b3 { 
103  高さ：300ピクセル。
104  背景色：黄色。
105  } 
106  .b4 { 
107  背景色：緑。
108 } 
109  </ スタイル> 
110  < 身体> 
111  < ボタンのID = "Button1を" >ボタン編集ボックススタイルをクリックした後、</ ボタン> 
112  < BR > < BR > 
113  < DIV ID = "ボックス" クラス= "B1" > </ divの> 
114  </ ボディ> 
115  </ HTML >
おすすめ
