<!DOCTYPE HTML> <HTML> <HEAD> <メタ文字コード= "UTF-8"> <タイトル> </ TITLE> <スタイルタイプ= "テキスト/ cssの"> .D1 { 幅:100pxに。 高さ:100pxに。 背景 - 色:赤; } .d2 { 高さ:200pxの。 背景 - 色:緑; } </スタイル> </ head> <body> <ボタンID = "BTN">操作#のD01 </ボタン> <brの/>の<br /> < ます。<script type = "text / JavaScriptを"> のvar BTN =のdocument.getElementById( "BTN" ); VARのボックス=のdocument.getElementById( "ボックス" ); / * スタイルを変更することで、間接的に*クラス属性 *と私達はちょうどに必要性能を高めるために、一度変性、* / btn.onclick = 関数(){ // box.className = "D2"; // box.className + = "D2";スタイルD2 D1に//増加の前にD2の注目スペース// 。addClass(ボックス、 "D2"); // removeClass(ボックス、 "D2"); toggleClass(ボックス、 "D2" )。 } / * * -パラメータ: * OBJターゲット要素 動的に指定されたクラス属性値のような要素を追加するための機能を設定します。 * Cnのクラス値を追加する * / 機能。AddClass(OBJ、CN)を{ // 決定され、複数の加算とcnを関数の予防さらに実行 IF(!HasClass(OBJ、CN)){ obj.className + = "" + CN; } } / * 要素は、指定されたクラスの属性値が含まれているか否かが判断される YESの場合、真を返す* * / 関数hasClass(OBJ、CN){ //はないOBJ CNクラス、正規表現が存在しない決定 VAR REGは= 新しい新正規表現( "\\ B" + CN + "\\ Bは" ); を返す;(obj.className)reg.test } / * エレメントのクラス属性値を削除指定 * / 関数removeClass(OBJ、CN){ // 正規表現作成 VAR REGを= 新しい新しい正規表現( "\\ B" + CN + "\\ B" ); // 一致する正規表現を使用してクラスを削除 obj.className = obj.classNameを.replace(REG、 "" ); } / * クラススイッチ 要素が削除された場合*クラス; NO、追加 * / 機能toggleClass(OBJ、CN){ IF (hasClass(OBJ、CN)){ removeClass(OBJ、CN); } 他{ 。。addClass(OBJ、CN) } } </ SCRIPT> </ HTML>