JavaScript_javascript でクラスと ID を変更する方法のヒント

class

ではなく、className です。class は予約キーワードであり、将来 JavaScript が Java などのクラスをサポートし始める可能性があるため、JavaScript は className を使用して class 属性にアクセスすることに注意してください。

スタイル属性について議論する際に、厄介な詳細とブラウザの違いに遭遇しましたが、それは嵐の海を進むようなものでした。クラスと ID の変更は、ブラウザーが調和して暮らす砂漠の静かなオアシスのようなものです。次の例を考えてみましょう:

p {

color: #000000; /* black */

}

p.emphasis {

color: #cc0000; /* red */

}

Test

当初、段落にはクラスが定義されていないため、そのフォントの色黒です。ただし、スタイルを変更するには JavaScript を 1 行記述するだけで十分です。

document.getElementById('test').className = 'emphasis';

すぐにテキストが赤色に変わります。元に戻したい場合は、次のようにすることができます:

document.getElementById('test').className = '';

スタイルが削除され、段落は元に戻ります。デフォルトの p{} ルール。

実際的な例については、「長さ制限のあるテキスト入力エリア」をご覧ください。カウンタの構造とレンダリング スタイルは次のとおりです (構造は JavaScript によって動的に生成されますが、この例には影響しません):

12/1250

div.counter {

font-size: 80%;

padding-left: 10px;

スパン。 toomuch {

font-weight: 600;

color: #cc0000;

}

ユーザーが入力したテキストが最大長に達すると、
のクラスをカウンターとして変更します。
[長さ制限のあるテキスト入力エリア、20 ～ 23 行目]

if (currentLength > maxLength )

this.popularElement.className = 'toomuch';

else

this.popularElement.className = '';
カウンターは太字と赤で変化します。

ID の変更もほぼ同じように機能します:
p {

color: #000000; /* black */

}

p#emphasis {

color: #cc0000; /* red */

}


テスト


ドキュメント.getElementsByTagName('p')[0].id = 'emphasis';

この段落のテキストが再び赤色になります。ただし、ID はあまり変更しないことをお勧めします。これらは CSS フックとして使用されるだけでなく、JavaScript フックとしてもよく使用され、変更すると不特定の副作用が発生する可能性があります。

クラスの追加

通常、要素のクラスに新しい値を設定するのではなく、クラスを追加するだけです。要素がすでに持っているスタイルを削除したくないからです。 CSS では複合スタイルが許可されているため、既存のクラスから CSS ディレクティブを削除せずに、新しいクラスに含まれるスタイルが要素に追加されます。

「フォーム検証」の writeError() 関数とremoveError() 関数が良い例です。グラフィック デザイナーは入力フィールドに 2 つまたは 3 つの幅を使用することが多いため、通常、フォーム フィールドに複数のクラスを適用します。フォームフィールドにエラーが含まれている場合に特別な警告スタイルを追加したいのですが、要素がすでに持っているスタイルを台無しにしたくありません。したがって、古いクラス値を単純に上書きすることはできません。そうすると、指定した幅が失われます。

この状況を見てください:




input.smaller {
width: 75px;

}

input.errorMessage {

border-color: #cc0000;

}

初期状態では、入力ボックスの幅は 75 ピクセルです。スクリプトがクラスを「errorMessage」に設定し、古い値を削除すると、フォーム フィールドに赤い境界線が表示されますが、幅も失われるため、ユーザーは非常に混乱する可能性があります。

したがって、errorMessage クラスを追加しました。

[フォーム検証、105 ～ 106 行目]

function writeError(obj,message) {

obj .className = ' errorMessage';

このコードは、既存の className を取得し、その前にスペースを追加して、その後に新しいクラスを追加します。このスペースは、オブジェクトがすでに持っているクラス値から新しいクラスを分離します。これで、入力ボックスの幅は 75 ピクセルになり、予想通り赤い枠線が表示されました。フォーム フィールドには 2 つのクラスが適用されており、HTML は次のようになります。




空白の Mozilla のクラス名
removeError( ) に気づくかもしれません。 errorMessage クラスの値を削除する場合、先頭にスペースはありません。それはブラウザのバグが原因です。元々値がなかったクラスに errorMessage を追加すると、Mozilla は先頭のスペースを削除します。その後 replace(/ errorMessage/,'') を実行すると、先頭のスペースがなくなって文字列 errorMessage が見つからないため、Mozilla はクラスを削除できません。

クラスの削除

ユーザーがエラーを修正したら、errorMessage クラスの値を削除する必要がありますが、元のクラス (小さいクラスなど) は影響を受けません。 RemoveError() 関数は次の関数を提供します:

[フォーム検証、119 ～ 120 行目]

function RemoveError() {

this.className = this.className. (/errorMessage/,'');

まず要素のクラスを取得し、次に文字列 'errorMessage' を '' (ヌル文字) に置き換えます。 errorMessage は class の値から取得されますが、他の値には影響しません。フォームフィールドの赤い枠線の色は失われますが、幅は 75 ピクセルのままです。