• HOME > 
  • JavaScript > 
  • jQueryのprop()メソッドで属性値を取得・設定する方...

jQueryのprop()メソッドで属性値を取得・設定する方法【attrとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

prop()の使い方

prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。

propを使えば、取得した値を用いて条件分岐を作成して処理を切り分けることができます。また、フォーム要素のチェックボックスのチェックの付け外しなどの処理を行うことも可能です。

要素の属性値を取得する

属性値を取得するときは、セレクターで要素を指定したうえで、取得したい属性の名前を記述するだけでOKです。

propで属性値を取得するときの書き方

次の例では、要素のクラス名を取得しています。

HTML

<div id="testA" class="hogehoge">ダミーテキストダミーテキスト</div>

jQuery

var testA = $("#testA").prop("class");//クラス名を取得
console.log(testA);

コンソール

hogehoge

要素の属性値を設定(追加・変更)する

属性値を追加・変更するときは、属性名の後ろにカンマで区切って記述します。

propで属性値を設定するときの書き方

次の例では、スタイル(インラインCSS)を追加して文字色を赤に変更させています。

HTML

<div id="testA" class="hogehoge">ダミーテキストダミーテキスト</div>

jQuery

$("#testA").prop("style","color:#d40000");//スタイルを追加

プレビュー

ダミーテキストダミーテキスト

複数の属性値をまとめて追加する

対象の要素に対して、複数の属性値を一括で設定することも可能です。

propで属性値を一括で設定するときの書き方

jQuery

$("#testA").prop({
                "class":"fugafuga",    
                "style":"color:#d40000"
            });

attr()メソッドとの違い

jQueryのattr()は、propと同様に属性を取得・設定できるメソッドです。

prop()が要素の「property(プロパティ)」を操作するのに対して、attr()は「attribute(属性)」を操作するメソッドとされています。

元々あった「attr()」でできない部分(フォームなどで動的に取得するなど)を補う目的で誕生したpropメソッドですが、jQueryのバージョンアップに伴い、現在ではどちらでも同じ処理が可能になっています。

(厳密にいうと両者は異なる格納場所から値を取り出してきているのですが、クラスやURLなどどちらにも共通して存在するものがあるため、結果としてpropでもattrでも同じ値が取得できる状態になっているようです。)

しかし全く同じではないので、好きな方を使えば良いという訳ではなく次のような違いを理解して場面に応じた使い分けが必要です。

  • フォームの要素の「値のない属性(checkedやdisabledなど)」を取得しようとしたときの返り値が異なる
  • prop()ではデータ属性を扱うことができない

フォームの要素の返り値が異なる

まずひとつめの違いはフォーム要素に用いる「checked」などの値の存在しない属性を取得しようとしたときの返り値が異なるという点です。

例えばcheckedの場合、チェックがあるときのpropの返り値は「true」ですが、attrで取得したときの返り値は「checked」になります。

チェックが無かった場合、propは「false」を返しますが、attrは「undifined」を返します。

propattr
チェックありtruechecked
チェックなしfalseundifined

この返り値の違いはcheckedだけでなく、フォーム要素で利用する「selected 」「disabled」「readonly」においても同じです。

propでチェックを付け外しする際にも「true」と「false」を使います。

propでチェックを操作するときの書き方

条件分岐など返り値を用いた処理を行う上でも真偽の値を返すpropの方が適していると言えます。

リンク先のサムネイル
jQueryでidを取得する方法【attrメソッドの使い方】

jQueryでHTMLの要素に付与されているidを取得するためには「attr()」メソッドを使用します。attrメソッドは要素の属性を取得や変更、削除を行うことができるメソッドです...【もっと読む】

prop()ではデータ属性を扱うことができない

propではHTMLに記述したデータ属性の取得や設定を行うことができません。

データ属性に関する処理を行いたいときはattrを使用する必要があります。

HTML

<div id="testA" data-name="fugafuga">ダミーテキストダミーテキスト</div>

jQuery

var testA = $("#testA").attr("data-name");//データ属性を取得
console.log(testA);

コンソール

fugafuga

また、jQueryにはデータ属性を扱うための専用のメソッドである「data()メソッド」があり、こちらの使用が推奨されているようです。

HTML

<div id="testA" data-name="fugafuga">ダミーテキストダミーテキスト</div>

jQuery

var testA = $("#testA").data("name");//データ属性を取得
console.log(testA);

コンソール

fugafuga

まとめ

以上が、jQueryのprop()メソッドで属性値を取得・設定する方法です。

jQueryにはpropをはじめ、attr()やdata()・val()など属性を取得・設定するメソッドが複数ありますので、それぞれの役割を理解して使い分けるようにしましょう。

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。