JavaScript HTML DOM - CSS を変更する
JavaScript で CSS を変更するには 4 つの方法があります:
ノード クラスまたは ID を変更する;
新しい CSS を作成する;シートにあります。
個人的には、後者の 2 つの方法を使用することはお勧めしません。ほとんどすべての機能は最初の 2 つの方法で実現でき、コードはより明確で理解しやすいです。
要素の実際のスタイルをフォームで取得する方法や注意点についても後ほどお話します。
1. ノードのスタイルを変更する (インライン スタイル)
このメソッドは、ノードの style 属性に直接書き込まれ、他のメソッドで設定されたスタイルをオーバーライドします。使い方はとても簡単です:
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 しかし、さらに憂鬱なのは、この属性が要素のすべてのクラスを含む文字列であり、すべてのクラスが含まれることです。クラスはスペースで区切られていますが、これはクラスを削除するときに非常に不便です（クラスを追加するだけで、クラス間に文字列接続を作成するだけですが、その前にスペースを追加することを忘れないでください）。
削除するときに正規表現を使用し、文字列内の異なる位置（先頭、末尾、中間）に従ってクラスを削除しましたが、より良い方法を考えつきました。それは、先頭と末尾のクラス名を削除することです。文字列にスペースを追加すると、すべてが中間メソッドになり、部分文字列を直接置き換えます:
//クラスを削除します
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}一般的なスタイルの変更にはこのメソッドを使用するのが最善です。CSS スタイルを定義する。特定のスタイルの定義は引き続き 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 ハイパースペースに配置することで、上記の問題は発生しません
次のセクション
