>メソッドでスタイル指定

メソッドでスタイル指定

メソッドのCSS操作では、cssの「font-size」などを「fontSize」と記入します。つまり、ハイフンを削除してその直後の文字を大文字に変えます。（キャメルケースと言います。）この場合、「fontSize」がjQueryのプロパティ名になります。

プロパティを取り出す

$(要素).css('プロパティ名');

値を省略して記入できるプロパティは使えません。

スタイル指定

$(要素).css('プロパティ名','値');

値は数値であれば、ピクセルが初期値の単位となります。

スタイルをまとめて指定

$(要素).css({'プロパティ名:値','プロパティ名:値'・・・});

単位は数値の場合、ピクセルがデフォルトになります。

条件に一致した最初の要素の高さを取得

var 変数 = $(要素).height();

単位を取り除いた数値のみが得られます。css('height')を使うと単位を含めた値が返されます。

要素の高さを指定

$(要素).height(値);

$(要素).height(function(){処理});

クロージャを使うことで動的な高さを設定できます。

条件に一致した最初の要素の幅を取得

var 変数 = $(要素).width();

単位を取り除いた数値のみが得られます。

要素（element）の幅を指定

$(element).width(値);

$(element).width(function(){処理});

クロージャを使うことで動的な幅を設定できます。

条件に一致した最初のelementのpaddingを含めた高さを取得

$(element).innerHeight();

数値のみを返します。window、documentオブジェクトには使えないため、その場合hight()メソッドを使います。

条件に一致した最初のelementのpaddingを含めた幅を取得

$(element).innerWidth();

数値のみを返します。window、documentオブジェクトには使えないため、その場合width()メソッドを使います。

条件に一致した最初のelementのpaddingとborderを含めた高さを取得

$(element).outerHeight();

数値のみを返します。window、documentオブジェクトには使えないため、その場合hight()メソッドを使います。また、引数にtureを指定するとmarginの値を含めて返してきます。

条件に一致した最初のelementのpaddingとborderを含めた幅を取得

$(element).outerWidth();

数値のみを返します。window、documentオブジェクトには使えないため、その場合width()メソッドを使います。また、引数にtureを指定するとmarginの値を含めて返してきます。

elementの表示位置を取得或いは指定する

$(element).offset(); // 取得

$(element).offset({位置}); // 指定

$(element).offset(function(){処理});

.offset()メソッドはelementの画面左上から、「top」と「left」のプロパティ値を返します。また、{top:数値,left:数値}のように引数を与えるとその位置に移動します。表示されているelementにのみ有効で、elementに「position:static;」が設定されいる場合、このメソッドは「position:relativ;」に変更します。

要素（エレメント）の親エレメントからの相対位置を取得

$(エレメント).position();

「top」と「left」のプロパティが返されます。また、margin、padding、borderにピクセルではない単位が設定されていると正確に取得できないことがあります。

縦方向のスクロール位置を取得或いは指定する

$(エレメント).scrollTop(); // 取得

$(エレメント).scrollTop({位置}); // 指定

引数を与えると指定位置までスクロールします。

横方向のスクロール位置を取得或いは指定する