.css()で要素のスタイルを操作しよう!

.css()で要素のスタイルを操作しよう!

.css()は、セレクタに一致した最初の要素のスタイルを取得したり、各要素にCSSプロパティを設定するメソッドです。

スタイルを取得するには?

$('div').css('background-color');

.css()の引数にプロパティ名を文字列で渡します。

サンプルでは、’background-color’で背景色を取得しています。

複数のスタイルを取得するには?

$('div').css(['background-color', 'color']);

プロパティ名は文字列の配列で渡すこともできます。

サンプルでは、’background-color’に加え、’color’で文字色も取得しています。

{
    background-color: "rgb(255, 255, 255)"
    color: "rgb(0, 0, 0)"
}

結果は、プロパティ名をキーとするオブジェクトで取得されます。

スタイルを操作するには?

$('div').css('width', 100);

‘width’に100を指定し、要素の幅を100pxにするサンプルです。

第1引数にプロパティ名、第2引数に値を渡します。

第2引数に数値を渡した場合、末尾にpxが付与されます。

サンプルで幅が100pxになるのはこれが理由です。

セレクタで選択したjQueryオブジェクト全てに反映されます。

コールバック関数で設定する

<div style="width: 100px;"></div>
<div style="width: 100px;"></div>
<div style="width: 100px;"></div>
$('div').css('width', function(index, value) {
    let width = parseInt(value, 10);
    
    return width + index * 100;
});

第2引数にコールバック関数を設定することもできます。

コールバック関数の第1引数は、0番目から始まるjQueryオブジェクトのインデックス、第2引数はCSSプロパティの値です。

サンプルでは、parseInt()で現在の幅を数値で取得し、インデックスに100を掛けたものを足して返しています。

幅は上から100px, 200px, 300pxに設定されます。

オブジェクトで設定する

$('div').css({
    width: 100,
    height: 100
});

複数のスタイルを取得するには?と同様、オブジェクトにも対応しています。

プロパティ名をキーとしたオブジェクトを渡すことで、スタイルを一括で指定できます。

スタイルを削除するには?

$('div').css('background-color', '');

スタイルは、第2引数に空文字列を渡すことで削除できます。

空文字列が指定されるわけではないことに注意が必要です。

// CSS
div {
    background-color: red;
}
// HTML
<div></div>
// jQuery
$('div').css('background-color', '');

元の背景色は赤で、削除した後も赤です。

CSSで設定したスタイルは削除されません。

<div style="background-color: red;"></div>
$('div').css('background-color', '');

元の背景色は赤ですが、削除した後は白になります。

style属性で指定したスタイルは削除されます。

!importantは指定できない?

$('div').css('display', 'none !important');

一見問題なさそうですが、このコードは動作しません。

!importantが無視されるだけでなく、非表示にもなりません。

classを使用する

// CSS
.style-important {
    display: none !important;
}
// jQuery
$('div').addClass('style-important');

$('div').removeClass('style-important');

classを使用して表示・非表示を切り替えるサンプルです。

.addClass()でclassを追加すれば非表示に、.removeClass()でclassを削除すれば表示されます。

CSSを変更することで、他のスタイルも指定できます。

公式のAPIリファレンスでもclassの使用が推奨されています。

cssTextプロパティを使用する

$('div').css('cssText', 'display: block !important;');

cssTextプロパティを使用し、style属性を直接書き換えます。

元のstyle属性が維持されない点に注意が必要です。

<div style="background-color: red;"></div>

例えば、このstyle属性は削除されるため、背景色は白で表示されます。

HTMLでのstyle指定、jQueryプラグインと干渉する可能性がありますので、特別な理由がなければclassを使用しましょう。

displayプロパティに!importantが指定されている場合

// CSS
div {
    display:none !important;
}
// jQuery
$('div').show();

display:none !important;が指定されている場合、.show()では表示されません。

$('div').css('cssText', 'display: block !important;');

CSSを変更すべきですが、フレームワーク等、編集が難しい場合があります。

その場合は、上記の点に注意してcssTextプロパティを使用しましょう。

background-color, colorの色を取得する

$('div').css('background-color', 'red');
$('div').css('background-color', '#ff0000');
$('div').css('background-color', 'rgb(255, 0, 0)');
$('div').css('background-color', 'rgba(255, 0, 0, 1)');

全て背景色を赤色にするサンプルです。

console.log($('div').css('background-color'));
// コンソール出力
rgb(255, 0, 0)

どのようにスタイル指定しても、rgb(r, g, b)の形式で取得されます。

サンプルでは.css()で指定しましたが、CSSで指定しても同様です。

変数と比較するような場合には、注意が必要です。

$('div').css('background-color', 'rgba(255, 0, 0, 0.5)');

console.log($('div').css('background-color'));
// コンソール出力
rgba(255, 0, 0, 0.5)

透明度が1以外の場合、rgba(r, g, b, a)の形式で取得されます。

.css()で変数を使うには?

let property = 'background-color';
let value = 'red';

$('div').css(property, value);

プロパティ名、値ともに変数での指定が可能です。

.css()でCSS3 transformを使うには?

$('div').css('transform', 'translate(50px, 50px) rotate(45deg) scale(2, 2) skew(-45deg)');

他のプロパティと同様、プロパティ名に’transform’, 値にmatrix, translate, rotate, scale, skewを設定します。

まとめ

  • スタイルを取得するには.css(property)を使用します。
  • 複数のスタイルを取得するには、引数に文字列の配列を渡します。
  • スタイルを操作するには、第2引数に値を指定します。
  • 値にコールバック関数を指定することもできます。
  • 値の操作は、プロパティ名をキーとするオブジェクトでも可能です。
  • スタイルを削除するには、値に空文字列を渡します。
  • !importantはclassの切り替えで実装します。
  • やむを得ない場合、cssTextプロパティにstyle属性を直接記述します。
  • 色はrgb(r, g, b)、透明度が1以外の場合はrgba(r, g, b, a)で取得されます。
  • .css()の引数は、文字列の変数でも問題ありません。
  • CSS3 transformは、プロパティ名に’transform’を指定し、値にmatrix, translate, rotate, scale, skewを設定します。

メソッドカテゴリの最新記事