jQueryから要素の幅とか高さ、色とかのCSSプロパティを取得したい・・・
そんな時に役立つプロパティの取得方法とコード例についてまとめてみました。
要素のCSSプロパティを取得する方法
その方法が次の２つ
- 個別のプロパティを取得
- 要素全体のプロパティを取得
この２つのやり方やコードの書き方は次の通り
個別のプロパティを取得
まず初めは width とか height とかの個別のプロパティ値を取得する方法
これにはcssメソッドというのを使います。
例えば要素を elem 、取得したいプロパティ名を name とすると次のような使い方
|
1 |
var value = $('.example').css('name'); |
その要素が持つ name というプロパティの値 value が返ってきます。
これだと分かりにくいので例を使って説明しましょう。
例えば次のようなdiv要素を考えてみます。
|
1 |
<div class="box" style="color: red; width: 300px; height: 250px;">とある要素</div> |
box というクラス名を持つdiv要素です。
そしてこの要素のcolorプロパティを取得して表示しているのが次のコード
|
1 2 3 |
var color = $('.box').css('color'); console.log(color); /// => rgb(255, 0, 0) |
css('color') のようにプロパティ名を文字列として渡します。
そうすると rgb(255, 0, 0) みたいな値が返ってくるという仕組み
ちなみに色の場合はカラーコードで指定してもrgb形式で返ってくるみたいです。
これと同様に width と height プロパティを取得＆表示しているのが次のコード例
|
1 2 3 4 5 6 7 |
var width = $('.box').css('width'); var height = $('.box').css('height'); console.log(width); /// => 300px console.log(height); /// => 250px |
幅とか高さの場合は数値だけでなく、単位までついたものが返ってきます。
以上がcssメソッドで個別のプロパティ値を取得する方法
この方法は色とか大きさとか余白とかを個別に変更したい場合に便利です。
要素全体のプロパティを取得
お次は要素全体のCSSプロパティを取得する方法
これはattrメソッドを使ってstyle属性の中身を見れば分かります。
そのやり方は要素 elem に対してattrメソッドに 'style' を渡すだけ
|
1 |
var style = elem.attr('style'); |
style属性に指定されたCSSコードがそのまま文字列で返ってきます。
例えば先ほどと同じく次のdiv要素があるとしましょう。
|
1 |
<div class="box" style="color: red; width: 300px; height: 250px;">とある要素</div> |
このdiv要素のCSSコードを全て取得して表示してるのが次のコード
|
1 2 |
var style= $('.box').attr('style'); console.log(style); |
コンソールには次のような内容が表示されます。
|
1 |
color: red; width: 300px; height: 250px; |
style属性に指定したCSSコードそのままです。
以上が要素全体のCSSプロパティを取得する方法
使用用途は少ないですが、全体のCSSコードを知りたい場面で使えると思います。
jQueryからCSSプロパティを変更するには
プロパティ値を取得する方法があるなら当然変更する方法もあります。
そのために使えるのが次の２つのメソッド
- cssメソッド
- propメソッド（またはattrメソッド）
実は今紹介した css とか attr は値を変更するにも使えるものです。
詳しいメソッドの使い方やコード例については次でまとめました。
取得方法のついでに変更方法も知っておくと要素の操作がしやすくなります。
ここまでのまとめ
ということで要素のCSSプロパティの取得方法まとめ
- 個別のプロパティを取得
要素に対してcssメソッドにプロパティ名を渡せばその値が文字列で返ってくる
- 要素全体のCSSコードを取得
要素に対してattrメソッドに 'style' を渡せばCSSコードが文字列で返ってくる
jQueryからCSSを動的に変更したい時とかに役立つはずです。
以上jQueryからCSSプロパティを取得する方法についてでした。
