JavaScriptでスタイル、ID、クラスなどのCSS属性を変更するためのスタイルメソッドのまとめ

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

JavaScript で CSS を変更するには 4 つの方法があります:

ノード スタイル (インライン スタイル) を変更する;

新しい CSS を作成する;
ページ内のスタイル シートを置き換える。

ほぼすべての機能は最初の 2 つの方法で実現でき、コードはより明確で理解しやすくなります。

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

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

このメソッドは、ノードの style 属性に直接書き込まれ、他のメソッドで設定されたスタイルをオーバーライドします。使い方はとても簡単です:

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

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

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

このメソッドは、パフォーマンスと動作の分離の原則に違反します。たとえば、ドラッグに使用できる p は、その上部と左側を変更するなど、頻繁に変更される要素のインスタント スタイルを定義する場合にのみ適しています。現時点では、このメソッドを使用してスタイルをすぐに変更し、他のメソッドの設定をオーバーライドすることはできません。

2. クラスと ID を変更する

ID とクラスは、変更後、要素のスタイルを自動的に更新します。

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 はスタイルを変更するための命令のみを発行します。スタイル定義は依然としてCSSに任せられています。

後の 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 ハイパースペースに配置することで、上記の問題は発生しません。

以上がJavaScriptでスタイル、ID、クラスなどのCSS属性を変更するためのスタイルメソッドのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。