jQueryでスタイルを操作（取得・設定(指定)）する（cssメソッド）

Webページのデザイン（見栄え）を設定するCSS（カスケーディング・スタイル・シート: Cascading Style Sheets）をjQueryで操作する方法を紹介します。
jQueryでCSSを設定することで、ページの再読み込みを行うことなく、ページのデザインを動的に自由自在に操作できます。

1 CSSの操作について
2 スタイルの取得
- 2.1 書式（構文）
- 2.2 サンプルコード
3 スタイルの設定（指定）
- 3.1 書式（構文）
- 3.2 サンプルコード
4 スタイルの一括設定（指定）
- 4.1 サンプルコード

CSSの操作について

jQueryでCSSを操作するにはcssメソッドを使用します。
指定したセレクタにマッチするDOM要素のスタイル（CSS）をcssメソッドで取得または設定（指定）することができます。

スタイルの取得

cssメソッドで対象のDOM要素のスタイルを取得する際は、cssメソッドの第1引数にCSSのプロパティ名を指定します。

書式（構文）

// スタイルの取得
const style = $('セレクタ').css('プロパティ名');

1 2	// スタイルの取得 const style = $('セレクタ').css('プロパティ名');

DOM要素に設定されたスタイルのプロパティを取得します。
プロパティ名はケバブケース（kebab-case）またはキャメルケース（camelCase）で指定できます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<script type="text/javascript">
$(document).ready(function() {
    const style = $('.style').css('background-color');
    window.alert(style);
});
</script>
</head>
<body>
  <div>
    <span class="style"
          style="background-color: red;">
      背景色を赤に設定したspan要素
    </span>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

$(document).ready(function() {

const style = $('.style').css('background-color');

window.alert(style);

});

</script>

</head>

<body>

<div>

<span class="style"

style="background-color: red;">

背景色を赤に設定したspan要素

</span>

</div>

</body>

</html>

ブラウザでの表示

スタイルの設定（指定）

cssメソッドで対象のDOM要素のスタイルを設定する場合は、cssメソッドの第1引数にCSSのプロパティ名を指定し、第2引数に設定する値を指定します。

書式（構文）

// スタイルの設定
$('セレクタ').css('プロパティ名', '設定値');

1 2	// スタイルの設定 $('セレクタ').css('プロパティ名', '設定値');

DOM要素に設定されたスタイルのプロパティを設定します。
設定値が数値の場合はデフォルトでピクセルと解釈されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<script type="text/javascript">
$(document).ready(function() {
    // 背景色を黄色に設定
    $('.style').css('background-color', 'yellow');
});
</script>
</head>
<body>
  <div>
    <span class="style">
      jQueryのcssメソッドで背景色を黄色に設定するspan要素
    </span>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

$(document).ready(function() {

// 背景色を黄色に設定

$('.style').css('background-color', 'yellow');

});

</script>

</head>

<body>

<div>

jQueryのcssメソッドで背景色を黄色に設定するspan要素

</span>

</div>

</body>

</html>

ブラウザでの表示

スタイルの一括設定（指定）

cssメソッドでは複数のスタイルを一括して設定することも可能です。
複数のスタイル（プロパティ）を設定する場合は、プロパティ名をキーに持つハッシュ形式のオブジェクトを作成し、プロパティの値をオブジェクトの値に指定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<script type="text/javascript">
$(document).ready(function() {
    // ハッシュ形式のオブジェクトでスタイルを定義
    const hashStyle = {
      backgroundColor: '#c2ffff',
      color: '#7f3300',
      fontSize: 20,
      fontWeight: 'bold',
      margin: '20px',
      padding: '10px'
    };
    // cssメソッドで複数のスタイルを設定
    $('.style').css(hashStyle);
});
</script>
</head>
<body>
  <div>
    <div class="style">
      jQueryのcssメソッドで複数のスタイルを設定するdiv要素
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

$(document).ready(function() {

// ハッシュ形式のオブジェクトでスタイルを定義

const hashStyle = {

backgroundColor: '#c2ffff',

color: '#7f3300',

fontSize: 20,

fontWeight: 'bold',

margin: '20px',

padding: '10px'

};

// cssメソッドで複数のスタイルを設定

$('.style').css(hashStyle);

});

</script>

</head>

<body>

<div>

jQueryのcssメソッドで複数のスタイルを設定するdiv要素

</div>

</body>

</html>

上記の例ではhashStyleというオブジェクトを作成して、背景色、前景色、フォントサイズ、フォントの太さ、余白（マージンとパディング）を設定しています。

ブラウザでの表示