jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素のプロパティを取得/設定するには?(prop)

2014年12月18日

任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。

  • このエントリーをはてなブックマークに追加

 propメソッドは、要素のプロパティを取得/設定します。attrメソッドと似ていますが、
  1属性値JavaScriptのプロパティとで値が異なるもの、
もしくは、
  2そもそも(属性名に対応しない)JavaScriptのプロパティにしかない情報
を取得する際に利用します。

 具体的には、
  1selectedcheckeddisabledmultipleなどの属性のこと、
  2tagNamenodeNamenodeTypeのようなJavaScriptプロパティのことです。

 以下は、propattrメソッドを利用して、さまざまな属性/プロパティにアクセスする例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<input id="name" type="text" value="権兵衛" disabled /><br />
<input id="chk" type="checkbox" value="true" checked="" /><br />

<select id="category">
  <option id="dotnet" value="dotnet">.NET</option>
  <option id="java" value="java">Java</option>
  <option id="ruby" value="ruby">Ruby</option>
  <option id="js" value="js" selected="selected">JavaScript</option>
</select>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  console.log($('#name').prop('disabled'));     // 結果:true
  console.log($('#name').attr('disabled'));     // 結果:disabled
  console.log($('#chk').prop('checked'));       // 結果:true
  console.log($('#chk').attr('checked'));       // 結果:checked
  console.log($('#category').prop('multiple')); // 結果:false
  console.log($('#category').attr('multiple')); // 結果:undefined
  console.log($('#js').prop('selected'));       // 結果:true
  console.log($('#js').attr('selected'));       // 結果:selected
  console.log($('#name').prop('nodeName'));     // 結果:INPUT
  console.log($('#name').attr('nodeName'));     // 結果:undefined
});
</script>
</body>
</html>
attr/propメソッドで属性/プロパティ値を取得するコード(prop.html)

 disabledcheckedmultipleなどの真偽属性*1について、attrメソッドは属性値もしくはundefinedで、propメソッドはtruefalseで返すことが確認できます。主にboolean型の値については、propメソッドで取得した方が誤解がないでしょう。

  • *1 真偽属性は、単にdisabledのように属性名だけで指定できるほか、disabled="disabled"disabled=""のように指定できます。値がないことを示すためにdisabled="false"のような指定はできませんので、注意してください。値がないことを示すには、属性は省略しなければなりません。

 nodeNameプロパティは属性ではなくJavaScriptのプロパティなので、propメソッドで取得します(=attrメソッドでは取得できません)。ただし、propメソッドが導入されるjQuery 1.5以前では、attr('nodeName')は「INPUT」を返します。

プロパティ値を設定する

 propメソッドを利用して、JavaScriptプロパティを設定することもできます。例えば以下は、[すべて選択/解除]ボタンをクリックすることで、全てのチェックボックスをチェック状態、もしくは非チェック状態にするサンプルです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="check">すべて選択/解除</button>
<div id="fav">
  <label><input type="checkbox" value="js" />JavaScript</label>
  <label><input type="checkbox" value="vb" />Visual Basic</label>
  <label><input type="checkbox" value="cs" />C#</label>
  <label><input type="checkbox" value="python" />Python</label>
  <label><input type="checkbox" value="ruby" />Ruby</label>
  <label><input type="checkbox" value="java" />Java</label>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  // ボタンクリックでチェックボックスを操作
  $('#check').click(function(e) {
    var c = $('#fav input[type="checkbox"]');
    // 先頭のチェックボックスがチェック状態であれば全てのチェックを解除
    if (c.prop('checked')) {
      c.prop('checked', false);
    // 先頭のチェックボックスが非チェック状態であれば全てをチェック
    } else {
      c.prop('checked', true);
    }
  });
});
</script>
</body>
</html>
全てのチェックボックスをチェック/非チェックで切り替えるコード(prop_set.html)
ボタンクリックで全てのチェックボックスがチェック状態に

[すべて選択/解除]ボタンをクリック

ボタンクリックで全てのチェックボックスがチェック状態に
ボタンクリックで全てのチェックボックスがチェック状態に

 

処理対象:要素プロパティの取得/設定 カテゴリ:属性|要素
API:.prop() カテゴリ:Attributes(属性)|Manipulation(要素の操作) > General Attributes(一般属性)

※以下では、本稿の前後を合わせて5回分(第6回~第10回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
6. 要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)

要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。

jQuery逆引きリファレンス
7. 要素の属性を操作するには?(attr/removeAttr)

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

jQuery逆引きリファレンス
8. 【現在、表示中】≫ 要素のプロパティを取得/設定するには?(prop)

任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。

jQuery逆引きリファレンス
9. 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)

任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。

jQuery逆引きリファレンス
10. 変数の型情報を判定するには?($.isXxxxx/$.type)

$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。

サイトからのお知らせ

Twitterでつぶやこう!