メソッドでスタイルシート操作

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

プロパティを取り出す

JS
1
2
3
<script>
$(要素).css('プロパティ名');
</script>
値を省略して記入できるプロパティは使えません。

スタイル指定

JS
1
2
3
<script>
$(要素).css('プロパティ名','値');
</script>
値は数値であれば、ピクセルが初期値の単位となります。

スタイルをまとめて指定

JS
1
2
3
<script>
$(要素).css({'プロパティ名:値','プロパティ名:値'・・・});
</script>
単位は数値の場合、ピクセルがデフォルトになります。

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

JS
1
2
3
<script>
var 変数 = $(要素).height();
</script>
単位を取り除いた数値のみが得られます。css('height')を使うと単位を含めた値が返されます。

要素の高さを指定

JS
1
2
3
4
<script>
$(要素).height(値);
$(要素).height(function(){処理});
</script>
クロージャを使うことで動的な高さを設定できます。

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

JS
1
2
3
<script>
var 変数 = $(要素).width();
</script>
単位を取り除いた数値のみが得られます。

要素の幅を指定

JS
1
2
3
4
<script>
$(要素).width(値);
$(要素).width(function(){処理});
</script>
クロージャを使うことで動的な幅を設定できます。

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

JS
1
2
3
<script>
$(要素).innerHeight();
</script>
数値のみを返します。window、documentオブジェクトには使えないため、その場合hight()メソッドを使います。

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

JS
1
2
3
<script>
$(要素).innerWidth();
</script>
数値のみを返します。window、documentオブジェクトには使えないため、その場合width()メソッドを使います。

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

JS
1
2
3
<script>
$(要素).outerHeight();
</script>
数値のみを返します。window、documentオブジェクトには使えないため、その場合hight()メソッドを使います。また、引数にtureを指定するとmarginの値を含めて返してきます。

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

JS
1
2
3
<script>
$(要素).outerWidth();
</script>
数値のみを返します。window、documentオブジェクトには使えないため、その場合width()メソッドを使います。また、引数にtureを指定するとmarginの値を含めて返してきます。

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

JS
1
2
3
4
5
<script>
$(要素).offset(); // 取得
$(要素).offset({位置}); // 指定
$(要素).offset(function(){処理});
</script>
.offset()メソッドは要素の画面左上から、「top」と「left」のプロパティ値を返します。また、{top:数値,left:数値}のように引数を与えるとその位置に移動します。表示されている要素にのみ有効で、要素に「position:static;」が設定されいる場合、このメソッドは「position:relativ;」に変更します。

要素の親要素からの相対位置を取得

JS
1
2
3
<script>
$(要素).position();
</script>
「top」と「left」のプロパティが返されます。また、margin、padding、borderにピクセルではない単位が設定されていると正確に取得できないことがあります。

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

JS
1
2
3
4
<script>
$(要素).scrollTop(); // 取得
$(要素).scrollTop({位置}); // 指定
</script>
引数を与えると指定位置までスクロールします。

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

JS
1
2
3
4
<script>
$(要素).scrollTop(); // 取得
$(要素).scrollTop({位置}); // 指定
</script>
引数を与えると指定位置までスクロールします。

クラス指定の有り無しを切り替える

JS
1
2
3
4
5
<script>
$(要素).toggleClass(クラス名);
$(要素).toggleClass(クラス名, true);
$(要素).toggleClass(function(){処理});
</script>
toggleClass()メソッドは引数のクラスが要素に指定されていると取り除き、指定されていない場合は指定して、有り無しを切り替えます。第二引数がある場合、明確に有り無しを設定できます。