ITコラム

jQuery  CSS プロパティ 取得

jQuery

2018.03.30

jQuery【 CSS 】プロパティの値を取得するサンプル

jQuery の css メソッドを使用すると CSS を動的に設定することができますが、CSS の設定値を取得することもできます。
今回は、jQuery の css メソッドを使用して CSS のプロパティ値を取得するサンプルを紹介します。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル(本ページ)
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

目次

1.CSS のプロパティ値を取得
2.CSS のプロパティ値を複数取得

1.CSS のプロパティ値を取得

 
jQuery の を使用して ボックスの高さの設定値を取得し、アラート表示します。
下のボックス内で任意の場所をクリックしてみて下さい。

 
上のサンプルのソースコードは次の通りです。

<style>
.wkBox{
  background-color:#CCC;
  height:100px;
}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $(".wkBox").click(function() {
    // 高さの設定値を取得
    var num = $(".wkBox").css("height");
    alert("ボックスの高さ:" + num);
  });
});
//-->
</script>

<div class="wkBox">
</div>

「 $(“.wkBox”).css(“height”) 」という記述で height についての CSS の設定値を取得しています。
「 height 」の箇所に font-size や position などプロパティを指定すると、CSS の設定値を取得することができます。

▲目次へ戻る

 

2.CSS のプロパティ値を複数取得

 
今度は、jQuery の を使用して 複数のプロパティ値を取得し アラート表示します。
下のボックス内で任意の場所をクリックしてみて下さい。

 
上のサンプルのソースコードは次の通りです。

<style>
.wkBox{
  background-color:#CCC;
  height:100px;
}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $(".wkBox").click(function() {
    // 高さ及び背景色の設定値を取得
    var prop = $(".wkBox2").css(["height", "background-color"]);
    alert("ボックスの高さ:"
          + prop["height"]
          + "\nボックスの背景色:"
          + prop["background-color"]);
  });
});
//-->
</script>

<div class="wkBox">
</div>

 
「 $(“.wkBox”).css([“height”, “background-color”]) 」という記述で CSS の設定値を 2 つ取得しています。
カンマ( , )区切りで複数のプロパティ値を取得できますが、この記述方法は jQuery のバージョンが 1.9 以降の場合のみ使用可能ですので ご注意下さい。

▲目次へ戻る

SHARE

最新記事

000

企業インタビュー

2020.03.19

【企業の声:株式会社デリバリーコンサルティング】求める人材は、プログラマーをゴールではなくスタートだと捉えられる人

本日は株式会社デリバリーコンサルティング第1サービス本部へお邪魔し、取締役 第1サービス本部本部長木村さん、第1グループ マネージャ三浦さん、プログラマカレッジから入社した栢分さんへお話を伺いました! ▲(左から順に)第 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.