ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery はクラス属性と CSS スタイルを変更します。
クラス属性の変更
class 属性はクラス名を指定するクラス属性です。
クラスセレクターを使用してスタイルを指定する場合は、要素のクラス名、つまり
のクラス属性の値を指定する必要があります。
各 HTML 要素にはクラス属性が 1 つしかないことに注意してください。ただし、クラス属性の値には複数の名前を指定できます。つまり、スペースで区切られた単語のリストが含まれる場合があります。
具体的な使用方法については、http://www.w3school.com.cn/css/css_selector_class.asp
を参照してください。
jQuery でクラス名を変更するには、attr() メソッドを使用して「class」属性を変更するか、addClass()、removeClass()、toggleClass() などのメソッドを使用します。
addClass()
API: http://api.jquery.com/addClass/
addClass() メソッドは、指定されたクラス名 (1 つ以上) を一致した要素に追加します。
要素の場合、クラス属性は複数の値を持つことができることに注意してください。このメソッドは既存の値を削除しませんが、1 つ以上のクラス属性を元の値に追加します。
attr() メソッドを使用してクラス属性を設定するのは上書きプロセスですが、addClass() は追加プロセスです。
クラスは最終的にはスペースで区切られます。
複数のクラスを追加する必要がある場合は、クラス名をスペースで区切ります。
1.4 以降、このメソッドのパラメータを関数に渡すこともできます。
removeClass()
API:
http://api.jquery.com/removeClass/
RemoveClass() メソッドは、選択した要素から 1 つ以上のクラスを削除する必要がある場合は、クラス名をスペースで区切ります。 パラメーターが渡されない場合、このメソッドは選択した要素のすべてのクラスを削除します。
toggleClass()
API:
http://api.jquery.com/toggleClass/
このメソッドは、各要素で指定されたクラスを確認し、存在する場合は削除し、存在しない場合は追加します。 パラメータを追加することで、削除のみ、または追加のみの操作を設定できます。 形式:$(セレクター).toggleClass(クラス,スイッチ) スイッチ値が true の場合は追加のみが行われ、false の場合は削除のみが行われます。
hasClass()
API:
http://api.jquery.com/hasClass/
hasClass() メソッドは、選択された要素に指定されたクラスが含まれているかどうかを確認します。
is() メソッドを使用して同じ機能を実現することもできます。メソッドのパラメーターは、「.className」.
などのセレクター文字列で渡されます。
CSS スタイルの変更
jQuery には、要素の CSS プロパティを直接返すか、設定するメソッドもいくつかあります。
css()
API: http://api.jquery.com/css/
読み取り操作: 一致する要素セットの最初の要素の指定されたスタイル値 (1 つ以上) を取得します。
注: 複数のスタイル値を読み取る操作は、jQuery v1.9 でのみ追加されました。
書き込み操作: 一致する要素セット内の各要素に 1 つ以上の CSS プロパティの値を設定します。
jQuery は、ブラウザごとに異なるいくつかの特定の状況を処理します。たとえば、W3C の cssFloat は、IE では、float を使用できます。jQuery は、それを各ブラウザの正しい名前に変換するのに役立ちます。 .
また、jQuery は、処理可能な .css ("background-color") や .css ("backgroundColor") などの CSS および DOM 形式の複数の単語の属性を合理的に解釈します。
高さ() と幅()
API:
http://api.jquery.com/height/
および
http://api.jquery.com/width/
ボックス サイズ属性が使用されない限り、この幅と高さの値にはパディング、境界線、マージンは含まれません。
書き込み時に設定されるのは、ボックスサイズの部分を除いたコンテンツの幅と高さであることに注意してください。
読み取り操作では、コレクションの最初の要素の属性値が返されます。
したがって、値を計算に使用する必要がある場合は、.height() と .width() を使用することをお勧めします。 読み取られる値は必ずしも整数であるとは限りません。ユーザーがページをズームすると、ブラウザーがこの状況に対する API を公開しないため、値が正しくない可能性があります。 この要素の親要素が非表示になっている場合、要素のサイズが正確に読み取れない可能性があります。 書き込み操作でサポートされる値のタイプは文字列または数値です。
数値の場合、jQuery のデフォルトの単位は px です。 文字列の場合は、数値や単位に加えて、100%、50%、自動などの適切な CSS 測定値を使用できます。 API: http://api.jquery.com/position/
親要素 (オフセット親) を基準とした最初に一致した要素の位置を返します。
読み取り操作のみ。
オフセット()
API: http://api.jquery.com/offset/
最初に一致した要素の座標を返すか、一致する各要素の座標を設定します。この座標はドキュメントに対する相対値です。
offsetParent()
読み取り操作のみを行い、親クラスに戻ります。
scrollLeft() およびscrollTop()
http://api.jquery.com/scrollLeft/ および http://api.jquery.com/scrollTop/