JavaScript_javascriptスキルでCSSスタイルを変更する方法まとめ

JavaScript を使用すると、CSS スタイルをその場で変更できるため、ユーザーの注目を集中させたい場所に注意を引き付け、より良いインタラクティブなエクスペリエンスを提供できます。

JavaScript を使用して CSS を変更するには 4 つの方法があります:

ノードのスタイルを変更します (インライン スタイル)
ノードのクラスまたは ID を変更します。
新しい CSS を作成します
ページ内のスタイルシートを置き換えます。

個人的には、後者の 2 つの方法を使用することはお勧めしません。ほとんどすべての機能は最初の 2 つの方法で実現でき、コードはより明確で理解しやすいです。

要素の実際のスタイルをフォームで取得する方法や注意点についても後ほどお話します。

1. ノードのスタイル (インライン スタイル) を変更します

このメソッドは最も高い重みを持ち、ノードのスタイル属性に直接書き込まれます。他のメソッドによって設定されたスタイルをオーバーライドします。使用方法は非常に簡単です:

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

ただし、一部の CSS スタイル名は、font-size、background-image などの複数の単語で構成されていることに注意してください。それらはすべてダッシュ (-) で接続されています。ただし、JavaScript では、ダッシュは「マイナス」を意味します。 " ため、属性名として使用できません。 fontSize、backgroundImage などの属性名を記述するには「camelCase」を使用する必要があります。

また、多くのスタイルには単位があり、数値だけを指定することはできないことにも注意してください。たとえば、fontSize の単位には、px、em、% (パーセント) などが含まれます。

このメソッドは、パフォーマンスと動作の分離の原則に違反します。通常、頻繁に変更される要素のリアルタイム スタイル (動作に関連する) を定義する場合にのみ適しています。たとえば、ドラッグに使用できる div が変更されます。ドラッグされると、属性は常に変化します。現時点では、このメソッドを使用してスタイルを変更し、他の設定をオーバーライドすることはできません。

2. クラスと ID を変更します

id と class はスタイルを設定するための「フック」であり、変更後、ブラウザーは要素のスタイルを自動的に更新します。

ID を変更する方法はクラスの方法と似ていますが、ID は要素を見つけるために使用されるため、個人的にはこの方法を使用することはお勧めしません。要素の表示スタイルの定義には使用しないことをお勧めします。 JavaScript フックとしてよく使用されます。不要なエラーが発生する可能性があります。
JavaScript では、class は予約されたキーワードであるため、要素クラスにアクセスするには属性として className を使用します。例:

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

しかし、さらに憂鬱なのは、この属性が要素のすべてのクラスを含む文字列であるため、すべてのクラスがスペースで区切られているため、クラスを削除するときに非常に不便です (クラスを追加するだけで、クラス間に文字列接続を作成するだけです)。ただし、前にスペースを追加することを忘れないでください~)。

削除するときに正規表現を使用し、文字列内のさまざまな位置 (先頭、末尾、中間) に応じてクラスを削除しましたが、より良い方法を考えつきました。それは、先頭と末尾のクラスを削除することです。 className 属性のそれぞれにスペースを追加すると、すべてが中間メソッドとなり、部分文字列が直接置き換えられます:

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

一般的なスタイルの変更にはこのメソッドを使用するのが最善です。CSS スタイルを定義する場合、JavaScript はスタイルの変更のみを発行します。

最後の 2 つの方法は洗練されておらず、互換性の問題もあるので、紹介しません~

3. 本物のスタイルを手に入れる

最初に明確にしておきたいのは、element.style はインライン スタイルのみを取得でき、スタイル シート内の定義は取得できないということです。
要素のスタイルは非常に多くの場所で定義できるため、ブラウザに表示される要素の実際のスタイルを知る方法はありますか?
実際、Microsoft と W3C は両方とも、対応するメソッドを提供しています。使用するには、それらをカプセル化するだけです。

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

渡される styleName は「キャメルケース形式」であることに注意してください~~

4. フォームの表示と非表示 (CSS を悪用しないでください)

フォームのオプションが動的に追加されることがよくあります。たとえば、フォームで婚姻状況として「既婚」を選択すると、配偶者の名前を入力するための追加の入力ボックスが表示されます。

選択肢がない場合は、もちろん「配偶者」関連のフォームをすべて非表示にする必要がありますが、現時点では CSS を使用して解決すべきではありません。つまり、style.display="none" を使用することはできません。それを隠すために。

だって、非表示にしても非表示にしても、入力ボックスは存在していて、増えも減りもしないんです~ [Halo] 端的に言うと、非表示になっていても、ユーザーがフォームを送信した場合、DOM にはまだ存在します。今回は、この非表示の入力ボックスの内容も一緒に送信されるため、予期しないエラーが発生する可能性があります~

正しいアプローチは、上記の問題が発生しないように、このコンテンツを DOM ハイパースペースに配置することです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。