jQueryを使ってCSSプロパティの値を取得する方法を紹介します。
cssメソッドは複数のCSSプロパティの値をまとめて取得することもできます。
目次
jQueryでCSSプロパティの値を取得する方法
1つのプロパティの値を取得する
jQueryでCSSプロパティの値を取得するには.css()
を使います。
第一引数には取得したいCSSプロパティを指定します。
1 |
var string = $('#elem').css('color'); |
取得されるCSSプロパティの値は優先順位が一番高いものになります。
サンプル
#sample-01
の要素のCSSプロパティの値を取得して表示します。
1 |
<div id="sample-01" style="color: white; /* rgb(255, 255, 255) */"></div> |
1 2 3 4 5 6 7 |
#sample-01 { color: blue; /* rgb(0, 0, 255) */ background: red; /* rgb(255, 0, 0) */ margin: 0 auto; width: calc(50% - 30px); height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(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()
の第一引数に欲しいプロパティの配列を渡します。
1 |
var obj = $('#elem').css(['width', 'height']); |
ただし、この方法はjQueryのバージョン1.9以降でしか使えないので、それより前のバージョンを利用している場合は、欲しいプロパティの数だけ.css()
を書くことで対応してください。
サンプル
#sample-02
の要素のCSSプロパティの値をまとめて取得して表示します。
1 |
<div id="sample-02"></div> |
1 2 3 4 5 |
#sample-02 { background-color: green; width: 150px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(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
要素の背景色を全て表示します。
赤
緑
青
1 2 3 4 5 |
<div id="sample-03"> <div>赤</div> <div style="background-color: green;">緑</div> <div style="background-color: blue;">青</div> </div> |
1 2 3 4 5 |
#sample-03 div { color: white; background-color: red; width: 200px; } |
1 2 3 4 5 6 7 8 9 |
$(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回目のループ */ }); }); |