プロパティの値を取得

広告

jQueryオブジェクトとして取得された要素の集合に設定されている指定のプロパティの値を取得する方法を確認します。次の書式を使います。 

css(String name)

引数:
  name  プロパティ名
戻り値:
  String

指定のプロパティの値を文字列として返します。jQueryオブジェクトに複数の要素が含まれている場合は最初の要素の値を返します。

例えば次のようにHTML文が記述されている場合で考えて見ます。 

<div id="main" style="margin:10px;border:1px solid #ff0000;">
  ...
</div>

このdiv要素のborderプロパティの値を取得するには次のように記述します。 

var border = $("#main").css("border");

なおプロパティはsytle属性を使って設定されていても、sytle要素を使って設定されていても値を取得することができます。

サンプル

では簡単なサンプルを作成して試して見ます。

sample1_1.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQueryテスト</title>

<script type="text/javascript" src="../file/jquery.js">
</script>
<script type="text/javascript" src="./js/script1_1.js">
</script>

<style type="text/css">
div{
  width:50px;
  height:50px;
}
</style>
</head>
<body>

<div id="redbox" style="background-color:#ff0000;">
</div>

<div id="bluebox" style="background-color:#0000ff;">
</div>

</body>
</html>

script1_1.js 

$(function() {
  $("div").click(function() {
    var bgcolor = $(this).css("background-color"); 
    alert(bgcolor);
  });
});

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

2つのdiv要素が表示されています。それぞれのdiv要素をクリックすると、その要素のbackground-colorプロパティの値を取得して表示します。

上のdiv要素をクリックした場合：

p1-2

下のdiv要素をクリックした場合：

p1-3

サンプル

先ほどはstyle属性を使って設定されたプロパティの値を取得していましたが、今度はsytle要素を使って設定されたプロパティの値を取得してみます。

sample1_2.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQueryテスト</title>

<script type="text/javascript" src="../file/jquery.js">
</script>
<script type="text/javascript" src="./js/script1_2.js">
</script>

<style type="text/css">
div{
  width:50px;
  height:50px;
}

#maroonbox{
  background-color:#800000;
}

#orangebox{
  background-color:#ffa500;
}
</style>
</head>
<body>

<div id="maroonbox">
</div>

<div id="orangebox">
</div>

</body>
</html>

script1_2.js 

$(function() {
  $("div").click(function() {
    var bgcolor = $(this).css("background-color"); 
    alert(bgcolor);
  });
});

上記を実際にブラウザ見てみると次のように表示されます。

p1-4

2つのdiv要素が表示されています。それぞれのdiv要素をクリックすると、その要素のbackground-colorプロパティの値を取得して表示します。

上のdiv要素をクリックした場合：

p1-5

下のdiv要素をクリックした場合：

p1-6

( Written by Tatsuo Ikura )