ITコラム

プログラミングノウハウ

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 を使用した表示・非表示に関するサンプル

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

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() {
    // 高さの設定値を取得
    let 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() {
    // 高さ及び背景色の設定値を取得
    let 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 以降の場合のみ使用可能ですのでご注意下さい。

▲目次へ戻る