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

colmun_main9610

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

jQuery を使用した CSS の設定方法については、以下のページをご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル

目次

 
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 以降の場合のみ使用可能ですので ご注意下さい。

▲目次へ戻る

コメントを残す

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