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

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

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

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

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

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

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

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

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

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

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

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

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

.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 つのメソッドは洗練されておらず、互換性の問題もあるので、紹介しません~

まず、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;
}

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

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

なぜなら、非表示にしても非表示にしても、入力ボックスはそこに存在しており、増加も減少もありません~ [Halo] 率直に言うと、非表示であっても、ユーザーがフォームを送信すると、DOM にはまだ存在します。このとき、この非表示の入力ボックスの内容も一緒に送信されるため、予期せぬエラーが発生する可能性があります~

正しい方法は、この内容を DOM ハイパースペースに配置することで、上記の問題は発生しません。

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