CSS操作

jQuery.cssNumberは単位なしで利用可能なプロパティの一覧を持っているオブジェクトです。一覧には次のものが含まれます。zindexfontWeightopacityzoomlineHeightwindows（jQuery1.6から追加）orphans（jQuery1.6から追加）fillOpacity（jQuery1.6.2から追加）columnCount（jQuery1.9から追加）...

.cssHooksはjQueryで利用できるCSSプロパティを独自に作成可能です。「get:function」には値を取得する際に実行したい処理を記述し、「set:function」には値を設定するときに実行したい処理を記述します。.cssHooksはベンダープレフィックスに依存しないCSSプロパティを作成するのに役立ちます。書式$.cssHooks = { get: function(elem,...

.addClassメソッドはクラスを追加し、.removeClass()メソッドはクラスを削除するメソッドですが、.toggleClass()メソッドは、引数として渡したクラスが要素に指定されていなければ指定し、指定されていれば除去します。ただし、2番目の書式のように、第２引数のスィッチ（trueまたはfalse）を使って、指定したクラスの有効・無効を明示的に設定することもできます。jQuery1...

.scrollLeft()メソッドは、引数なしで要素の横方向の現在のスクロール位置を取得し、引数を与えれば指定した位置までスクロールします。書式$( 対象要素 ).scrollLeft();$( 対象要素 ).scrollLeft({位置});var scrollLeft = $("p").scrollLeft();$('p').scrollLeft(300);サンプルスクロール位置を取得する。c...

.scrollTop()メソッドは、引数なしで要素の縦方向の現在のスクロール位置を取得し、引数を与えれば指定した位置までスクロールします。書式$( 対象要素 ).scrollTop();$( 対象要素 ).scrollTop({ 位置 });var scrollTop = $("p").scrollTop();$('p').scrollTop(300);サンプルスクロール位置を取得または設定する。...

.offset()メソッドが画面の端からの位置を取得するのに対して、.position()メソッドは要素の親要素からの相対位置を返します。戻り値には、「top」と「left」の２つのプロパティが含まれます。対象要素のmargin、padding、borderの値にピクセル以外が指定されている場合（例えば「margin: 0 auto;」など）は、正しい位置が返されないことがあります。書式$( 対象...

.offset()メソッドは、要素の画面左上からの位置を返します。戻り値には、「top」と「left」の２つのプロパティが含まれます。例えば、$(対象要素).offset().leftと記述することにより左からの位置を種痘します。leftをtopに置き換えると上からの位置が取得できます。jQuery1.4からは、.offset()メソッドで要素を移動をできるようになりました。引数としては「位置」を...

outerWidth()メソッドは、条件にマッチした最初の要素のouterWidth（padding、borderを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。引数には「marginの値も含めるかどうか」をtureまたはfalseで指定可能です。既定値はfalseなので、何も指定しない場合はmarginの値は含まれません。このメソッドはwindowsオブジェク...

.outerHeight()メソッドは、条件にマッチした最初の要素のouterHeight（padding、borderを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。引数には「marginの値も含めるかどうか」をtrueまたはfalseで指定可能です。既定値はfalseなので、何も指定しない場合はmarginの値は含まれません。このメソッドはwindowsオブ...

innaerWidth()メソッドは、条件にマッチした最初の要素のinnerWidth（paddingを含めた幅のピクセル数）を、例えば「300」のように単位付きの数値だけで返します。このメソッドはwindowオブジェクト、documentオブジェクトに対しては使用できないため、代わりに.width()メソッドを使用します。書式$( 対象要素 ).innaerWidth();var pHeight...

innerHeight()メソッドは、条件にマッチした最初の要素のinnerHeight（paddingを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。このメソッドはwindowオブジェクト、documentオブジェクトに対しては使用できないため、代わりに.height()メソッドを使用します。書式$( 対象要素 ).innerHeight(値);var pHe...

.width()メソッドに引数を与えると、要素の高さを設定できます。条件にマッチする要素が複数ある場合、値はすべての要素に一括して設定されます。jQuery1.4.1以降では引数としてクロージャを記述することにより、動的に幅を設定できます。サンプルでは、特定の要素のインデックス番号を取得index()メソッドでp要素を指定し、1×50、2×50・・・と順番に値を返すことによって50ピクセルずつ幅を...

.width()メソッドは、条件にマッチした最初の要素の幅（paddingを含めないピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。「300px」のように単位を含めたい場合は、.width()ではなく、.css('width')を使用しましょう。書式：$( 対象要素 ).width();var w = $("p").width();サンプル１、要素の幅を取得する。script...

.height()メソッドに引数を与えると、要素の高さを設定できます。条件にマッチする要素が複数ある場合、値はすべての要素に一括して設定されます。jQuery1.4以降では引数としてクロージャを記述することにより、動的に高さを設定できるようになりました。書式$( 対象要素 ).height(値);$( 対象要素 ).height(function(){処理…});$("p:last").heigh...

.height()メソッドは、条件にマッチした最初の要素の高さ（paddingを含めないピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。「300px」のように単位を含めたい場合は、.height()ではなく.css('height')を使用します。書式$( 対象要素 ).height();var h= $("p").height();サンプル１、要素の高さを取得するscrip...

「プロパティ名1：値1, プロパティ名2:値2・・・」と指定を列挙することで、要素に対して一括してスタイルを設定できます。値が数値の場合、単位はデフォルトでピクセルと解釈されます。上記の例の1行目のようにプロパティ名をCSSでの表記法と同様に指定する場合は引用符が必須となりますが、プロパティ名をキャメルケースで指定する場合は引用符は必須ではありません。書式CSS({プロパティ名1：値1,プロパティ...

DOM要素に対して、プロパティ名と値を渡しスタイルを設定します。スタイルの指定はCSSの記法と同様なので、backgroundやmarginといった略記式のプロパティの指定も可能です。書式CSS(' プロパティ名 ',' 値 ')$(this).css('color','#fff')値が数値の場合、単位がないときはデフォルトでピクセルと解釈されます。サンプルクリックした要素の背景をblueにする<...

DOM要素に設定されたスタイルやプロパティを取得します。プロパティ及び引数にはこれから行う処理に必要な値を指定します。このとき、marginやbackgroundなどといった複数の値を一括指定可能な略記式のプロパティでは指定できません。必ず、margin-rightやbackground-colorなど、単一の値を返すプロパティを指定しましょう。上記の場合だと、divに設定されているbackgro...