jQueryでcssプロパティを取得する方法です。
複数のプロパティや、複数の要素を一気に取得したりpxの文字を除いて取得する方法も併せてご紹介します。
目次
cssプロパティを1つ取得
css()を使って、スタイルを1つ取得します。
基本構文
$(‘p’).css(‘width’)
css()の引数にプロパティを指定すると、値を返します。
cssを取得して値をコンソールに表示するサンプル
HTML＆CSS
|
1 2 3 4 5 6 7 |
<style> p {width: 780px;} </style> <p>cssを取得1</p> <p>cssを取得2</p> <p>cssを取得3</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function() { // <p>要素のcssを取得し、変数に格納 var w = $('p').css('width'); // コンソールログに表示 console.log(w); }); |
結果（コンソール）
780px
cssのwidthの値を取得して、コンソールに表示されました。
コンソールについては下記ページでご紹介しています。
cssプロパティを複数取得（jQuery1.9〜）
css()を使って今度は複数のスタイルを取得してみましょう。
基本構文
$(‘p’).css( [ ‘width’, ‘height’ ] )
css()の引数に[]（角カッコ）を入れ、その中にカンマ区切りで複数のプロパティを指定すると、複数の値を返します。
ただ、jQuery1.9以前ではundefinedのエラーになるため、バージョンに気を付けましょう。
cssを複数取得して、値をコンソールに表示するサンプル
次に、cssプロパティを複数取得し、値を一括で表示するのと、1つずつ表示させてみましょう。
HTML＆CSS
|
1 2 3 4 5 6 7 8 9 10 |
<style> p { width: 780px; height: 160px; } </style> <p>cssを取得1</p> <p>cssを取得2</p> <p>cssを取得3</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { // <p>要素のcssを取得し、変数に格納 var obj = $('p').css(['width', 'height']); // コンソールログに一括表示 console.log(obj); // コンソールにwidthだけ表示 console.log(obj.width); // コンソールにheightだけ表示 console.log(obj.height); }); |
結果（コンソール）
Object {width: “780px”, height: “160px”}
780px
160px
1段目は値が複数表示されましたが、objectという形式になっています。
2〜3段目はそれぞれ1つずつ値が表示されました。
2段目はwidthだけが、3段目はheightだけが表示されています。
オブジェクトから2〜3段目のように特定の値を出力する場合は、オブジェクトの変数と取り出したいプロパティを.（ドット）で繋ぐだけです。
複数要素のcssを取得
ループ処理を使って複数の要素からスタイルを一括で取得してみましょう。
複数要素のcssを取得して、値をコンソールに表示するサンプル
複数要素のcssを一括取得し、コンソールに1つずつ表示させてみましょう。
HTML＆CSS
|
1 2 3 |
<p style="width: 780px">cssを取得1</p> <p style="width: 580px">cssを取得2</p> <p style="width: 380px">cssを取得3</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { // 3つの<p>要素をeachで3回ループ処理する $('p').each(function() { // <p>要素のcssを取得し、変数に格納 var w = $(this).css('width'); // コンソールログに表示 console.log(w); }); }); |
結果（コンソール）
780px
580px
380px
each()を使い、3つの<p>要素を1つずつループしながら取得し、コンソールに表示させました。
以下のように動作しています。
- 3つの
<p>要素をeach()でループ処理
$(‘p’).each(function() { css()で<p>要素のcssを取得し、変数に格納
$(this)を使えば「該当する<p>要素」を選択できる
var w = $(this).css(‘width’);- コンソールに表示
console.log(w); - 上記の処理を
<p>要素がなくなるまでループ処理
pxなどの単位を除外して数値のみ取得
取得したcssの値は、通常pxなどの単位が付いた文字列のため、計算などに使えません。
そこでpxなどの単位を除外し、整数として計算できるように取得する方法をご紹介します。
取得したcssの値から文字の部分を削除して表示するサンプル
HTML＆CSS
|
1 2 3 4 5 |
<style> p {width: 780px;} </style> <p>cssを取得</p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { // <p>要素のcssを取得し、変数に格納 var w = $('p').css('width'); // 取得したcssの値をparseInt()を使って整数型へ変換し、変数に格納 w = parseInt(w); // コンソールに表示するとpxが消える console.log(w); }); |
結果（コンソール）
780
上記のようにpxという文字が消え、数値のみ出力されました。
parseInt()
parseInt()を使えば、文字列型を整数型に変換することができます。
引数に整数型に変換したい文字列を指定します。
parseInt( 整数型に変換したい文字列 )
先頭が数値の文字列型を、整数型に変換すると数値以降の文字は消えてしまうため、結果的にpxの文字も消えることになります。
