jQuery｜CSSプロパティの値を複数まとめて取得する方法

jQueryを使ってCSSプロパティの値を取得する方法を紹介します。

cssメソッドは複数のCSSプロパティの値をまとめて取得することもできます。

1 jQueryでCSSプロパティの値を取得する方法

jQueryでCSSプロパティの値を取得する方法

1つのプロパティの値を取得する

jQueryでCSSプロパティの値を取得するには.css()を使います。

第一引数には取得したいCSSプロパティを指定します。

var string = $('#elem').css('color');

1	var string = $('#elem').css('color');

取得できるプロパティ

デフォルトスタイルシートのプロパティ
外部CSSで設定されたプロパティ
<style>で設定されたプロパティ
要素にstyle属性で設定されたプロパティ

取得されるCSSプロパティの値は優先順位が一番高いものになります。

サンプル

#sample-01の要素のCSSプロパティの値を取得して表示します。

<div id="sample-01" style="color: white; /* rgb(255, 255, 255) */"></div>

1	<div id="sample-01" style="color: white; /* rgb(255, 255, 255) */"></div>

#sample-01 {
  color: blue;     /* rgb(0, 0, 255) */
  background: red; /* rgb(255, 0, 0) */
  margin: 0 auto;
  width: calc(50% - 30px);
  height: 100px;
}

#sample-01 {

color: blue; /* rgb(0, 0, 255) */

background: red; /* rgb(255, 0, 0) */

margin: 0 auto;

width: calc(50% - 30px);

height: 100px;

}

$(function() {
  var color = $('#sample-01').css('color');
  console.log(color);
  // -> rgb(255, 255, 255)

  var background = $('#sample-01').css('background');
  console.log(background);
  // ->  rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

  var backgroundColor = $('#sample-01').css('background-color');
  console.log(backgroundColor);
  // ->  rgb(255, 0, 0)

  var margin = $('#sample-01').css('margin');
  console.log(margin);
  // ->  0px 185.5px

  var width = $('#sample-01').css('width');
  console.log(width);
  // ->  311px

  var height = $('#sample-01').css('height');
  console.log(height);
  // ->  100px
});

$(function() {

var color = $('#sample-01').css('color');

console.log(color);

// -> rgb(255, 255, 255)

var background = $('#sample-01').css('background');

console.log(background);

// -> rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

var backgroundColor = $('#sample-01').css('background-color');

console.log(backgroundColor);

// -> rgb(255, 0, 0)

var margin = $('#sample-01').css('margin');

console.log(margin);

// -> 0px 185.5px

var width = $('#sample-01').css('width');

console.log(width);

// -> 311px

var height = $('#sample-01').css('height');

console.log(height);

// -> 100px

});

複数のプロパティの値をまとめて取得する

jQueryの.css()は複数のCSSプロパティの値をまとめて取得することもできます。

まとめて取得するには.css()の第一引数に欲しいプロパティの配列を渡します。

var obj = $('#elem').css(['width', 'height']);

1	var obj = $('#elem').css(['width', 'height']);

ただし、この方法はjQueryのバージョン1.9以降でしか使えないので、それより前のバージョンを利用している場合は、欲しいプロパティの数だけ.css()を書くことで対応してください。

サンプル

#sample-02の要素のCSSプロパティの値をまとめて取得して表示します。

<div id="sample-02"></div>

1	<div id="sample-02"></div>

#sample-02 {
  background-color: green;
  width: 150px;
  height: 100px;
}

#sample-02 {

background-color: green;

width: 150px;

height: 100px;

}

$(function() {
  var obj = $('#sample-02').css([
    'background-color',
    'width',
    'height'
  ]);

  console.log(obj);
  // -> Object {background-color: "rgb(0, 128, 0)", width: "150px", height: "100px"}

  console.log(obj['background-color']);
  // -> rgb(0, 128, 0)

  console.log(obj.width);
  // -> 150px

  console.log(obj.height);
  // -> 100px
});

$(function() {

var obj = $('#sample-02').css([

'background-color',

'width',

'height'

]);

console.log(obj);

// -> Object {background-color: "rgb(0, 128, 0)", width: "150px", height: "100px"}

console.log(obj['background-color']);

// -> rgb(0, 128, 0)

console.log(obj.width);

// -> 150px

console.log(obj.height);

// -> 100px

});

複数の要素のCSSプロパティの値を取得する

ループ処理を使えば複数の要素のCSSプロパティの値を取得することができます。

サンプル

#sample-03配下のdiv要素の背景色を全て表示します。

赤

緑

青

<div id="sample-03">
  <div>赤</div>
  <div style="background-color: green;">緑</div>
  <div style="background-color: blue;">青</div>
</div>

</div>

#sample-03 div {
  color: white;
  background-color: red;
  width: 200px;
}

#sample-03 div {

color: white;

background-color: red;

width: 200px;

}

$(function() {
  $('#sample-03 div').each(function() {
    var backgroundColor = $(this).css('background-color');
    console.log(backgroundColor);
    // -> rgb(255, 0, 0) /* 1回目のループ */
    // -> rgb(0, 128, 0) /* 2回目のループ */
    // -> rgb(0, 0, 255) /* 3回目のループ */
  });
});