jQueryで要素のCSSプロパティを取得する2つの方法

jQueryから要素の幅とか高さ、色とかのCSSプロパティを取得したい・・・

そんな時に役立つプロパティの取得方法とコード例についてまとめてみました。

要素のCSSプロパティを取得する方法

その方法が次の2つ

  • 個別のプロパティを取得
  • 要素全体のプロパティを取得

この2つのやり方やコードの書き方は次の通り

個別のプロパティを取得

まず初めは width  とか height  とかの個別のプロパティ値を取得する方法

これにはcssメソッドというのを使います。

 

例えば要素を elem  、取得したいプロパティ名を name  とすると次のような使い方

その要素が持つ name  というプロパティの値 value  が返ってきます。

これだと分かりにくいので例を使って説明しましょう。

 

例えば次のようなdiv要素を考えてみます。

box  というクラス名を持つdiv要素です。

 

そしてこの要素のcolorプロパティを取得して表示しているのが次のコード

css('color')  のようにプロパティ名を文字列として渡します。

そうすると  rgb(255, 0, 0)  みたいな値が返ってくるという仕組み

ちなみに色の場合はカラーコードで指定してもrgb形式で返ってくるみたいです。

 

これと同様に width と height プロパティを取得&表示しているのが次のコード例

幅とか高さの場合は数値だけでなく、単位までついたものが返ってきます。

 

以上がcssメソッドで個別のプロパティ値を取得する方法

この方法は色とか大きさとか余白とかを個別に変更したい場合に便利です。

要素全体のプロパティを取得

お次は要素全体のCSSプロパティを取得する方法

これはattrメソッドを使ってstyle属性の中身を見れば分かります。

そのやり方は要素 elem  に対してattrメソッドに 'style'  を渡すだけ

style属性に指定されたCSSコードがそのまま文字列で返ってきます。

 

例えば先ほどと同じく次のdiv要素があるとしましょう。

 

このdiv要素のCSSコードを全て取得して表示してるのが次のコード

コンソールには次のような内容が表示されます。

style属性に指定したCSSコードそのままです。

 

以上が要素全体のCSSプロパティを取得する方法

使用用途は少ないですが、全体のCSSコードを知りたい場面で使えると思います。

jQueryからCSSプロパティを変更するには

プロパティ値を取得する方法があるなら当然変更する方法もあります。

そのために使えるのが次の2つのメソッド

  • cssメソッド
  • propメソッド(またはattrメソッド)

実は今紹介した css  とか attr  は値を変更するにも使えるものです。

 

詳しいメソッドの使い方やコード例については次でまとめました。

取得方法のついでに変更方法も知っておくと要素の操作がしやすくなります。

ここまでのまとめ

ということで要素のCSSプロパティの取得方法まとめ

  • 個別のプロパティを取得
    要素に対してcssメソッドにプロパティ名を渡せばその値が文字列で返ってくる
  • 要素全体のCSSコードを取得
    要素に対してattrメソッドに 'style'  を渡せばCSSコードが文字列で返ってくる

jQueryからCSSを動的に変更したい時とかに役立つはずです。

以上jQueryからCSSプロパティを取得する方法についてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください