.prop（）と.attr（）

したがって、jQuery 1.6には新しい関数がありますprop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

またはこの場合、彼らは同じことをしますか？

また、を使用するように切り替える必要がある場合、1.6に切り替えるとprop()、すべての古いattr()通話が切断されますか？

更新

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

（このフィドルもご覧ください：http : //jsfiddle.net/maniator/JpUF2/）

コンソールはgetAttributeを文字列として、およびを文字列として記録しattrますが、をpropとして記録するのCSSStyleDeclarationはなぜですか？そして、それは将来の私のコーディングにどのように影響しますか？

2012年11月1日更新

私の元の答えは特にjQuery 1.6に適用されます。私のアドバイスは同じですが、jQuery 1.6.1は少し変更されました：壊れたWebサイトの予測された山に直面して、jQueryチームはattr()ブール属性の以前の動作に近い（ただしまったく同じではない）ものに戻しました。John Resigもブログを書いている。彼らの難しさはわかりますが、彼の推奨する意見にはまだ同意しませんattr()。

元の答え

DOMを直接使用せずにjQueryのみを使用したことがある場合、これは混乱を招く変更になる可能性がありますが、概念的には改善です。ただし、この変更の結果として機能しなくなるjQueryを使用する膨大な数のサイトにはあまり適していません。

主な問題を要約します。

• あなたは通常prop()よりも欲しいattr()。
• ほとんどの場合、prop()これまでattr()使用していたことを実行します。呼び出しを交換attr()してprop()、あなたのコードは、一般的に動作しますで。
• プロパティは通常、属性よりも扱いが簡単です。属性値は文字列のみにすることができますが、プロパティは任意のタイプにすることができます。たとえば、checkedプロパティはブール値であり、styleプロパティはスタイルごとに個別のプロパティを持つオブジェクトであり、sizeプロパティは数値です。
• 同じ名前のプロパティと属性の両方が存在する場合、通常一方を更新すると他方が更新されますが、これはvalueand などの入力の特定の属性には当てはまりませんchecked。これらの属性の場合、プロパティは常に現在の状態を表しますが、属性（古いバージョンのIEを除く）は、入力のデフォルト値/チェック済み（defaultValue/ defaultCheckedプロパティに反映）に対応します。
• この変更により、属性とプロパティの前に詰まっている魔法のjQueryレイヤーの一部が削除されます。つまり、jQuery開発者は、プロパティと属性の違いについて少し学ぶ必要があります。これは良いことです。

jQuery開発者であり、このビジネス全体のプロパティと属性について混乱している場合は、一歩下がって、それについて少し学ぶ必要があります。jQueryは、このようなことから身を守るためにそれほど懸命に取り組んでいないからです。主題に関する権威あるがやや辛口な言葉については、仕様があります：DOM4、HTML DOM、DOMレベル2、DOMレベル3。MozillaのDOMドキュメントは、最新のほとんどのブラウザに有効であり、仕様よりも読みやすいため、DOMリファレンスが役立つ場合があります。要素のプロパティに関するセクションがあります。

プロパティが属性よりも扱いやすい例として、最初にチェックされるチェックボックスを考えてみましょう。これを行うには、2つの有効なHTMLがあります。

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

では、jQueryでチェックボックスがオンになっているかどうかをどのように確認しますか？Stack Overflowを見ると、一般的に次の提案が見つかります。

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

これは実際には、checkedブールプロパティを使用する世界で最も簡単なものです。ブールプロパティは、1995年以降存在し、すべての主要なスクリプト対応ブラウザーで問題なく機能しています。

if (document.getElementById("cb").checked) {...}

このプロパティは、チェックボックスをオンまたはオフにすることも簡単にします。

document.getElementById("cb").checked = false

jQuery 1.6では、これは明確に

$("#cb").prop("checked", false)

checkedチェックボックスをスクリプト化するために属性を使用するという考えは役に立たず、不必要です。プロパティは、必要なものです。

• チェックボックスをオンまたはオフにする正しい方法がchecked属性を使用していることは明らかではありません
• 属性値は、現在の表示状態ではなくデフォルトを反映します（IEの一部の古いバージョンを除き、状況がさらに難しくなります）。この属性は、ページのチェックボックスがチェックされているかどうかについては何も伝えません。http://jsfiddle.net/VktA6/49/を参照してください。

ティムはかなりうまく言ったと思いますが、一歩戻りましょう。

DOM要素はオブジェクトであり、メモリにあるものです。OOPのほとんどのオブジェクトと同様に、オブジェクトにはプロパティがあります。また、個別に、要素で定義された属性のマップを持っています（通常、ブラウザーが要素を作成するために読み取ったマークアップから取得されます）。要素のいくつかのプロパティは、その取得の初期から値を属性（同一または類似の名前のvalue「値」属性からその初期値を取得します。href「のhref」属性からその初期値を取得しますが、それはまったく同じ値ではありません。classNameから「クラス」属性）。他のプロパティは、他の方法で初期値を取得します。たとえば、parentNodeプロパティは、親要素が何であるかに基づいて値を取得します。style 「スタイル」属性があるかどうかに関係なく、プロパティ。

のページのこのアンカーを考えてみましょうhttp://example.com/testing.html：

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

いくつかの不必要なASCIIアート（そして多くのものを省く）：

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− ＋
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− ＋
| href： "http://example.com/foo.html" |
| 名前： "fooAnchor" |
| id： "fooAnchor" |
| className： "テスト1" |
| 属性：|
| href： "foo.html" |
| 名前： "fooAnchor" |
| id： "fooAnchor" |
| クラス：「テスト1」|
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− ＋

プロパティと属性は異なることに注意してください。

さて、それらは明確ではありますが、これらはすべてゼロから設計されたのではなく進化したため、いくつかのプロパティは、設定した場合、それらが派生した属性に書き戻します。しかし、すべてがそうであるとは限りません。また、href上からわかるように、マッピングは常に「値を渡す」とは限らず、解釈が伴う場合もあります。

プロパティがオブジェクトのプロパティであることについて話すとき、私は抽象的に話しているのではありません。次にjQuery以外のコードを示します。

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

（これらの値は、ほとんどのブラウザーのものであり、いくつかのバリエーションがあります。）

linkオブジェクトが本物である、とあなたはアクセスの間に本物の区別があります見ることができますプロパティをその上、及びアクセス属性が。

Timが言ったように、ほとんどの場合、プロパティを操作したいと考えています。部分的には、それらの値（名前も含む）がブラウザー間でより一貫している傾向があるためです。関連するプロパティがない場合（カスタム属性）、またはその特定の属性の属性とプロパティが1：1でないことがわかっている場合（href上記の "href"と同様）、属性を操作するだけです。。

標準プロパティは、さまざまなDOM仕様に配置されています。

• DOM2 HTML （廃止されました。代わりにHTML仕様を参照してください）
• DOM2 Core （廃止）
• DOM3 Core （廃止）
• DOM4

これらの仕様には優れたインデックスがあり、それらへのリンクを手元に置いておくことをお勧めします。いつも使っています。

カスタム属性には、たとえば、data-xyzメタデータをコードに提供するために要素に配置する可能性のあるすべての属性が含まれます（これは、data-プレフィックスを使用している限り、HTML5の時点では有効です）。（jQueryの最近のバージョンではdata-xyz、data関数を介して要素にアクセスできますが、その関数は単なる属性のアクセサーではありませんdata-xyz [それよりも多くも少なくも]です。実際にその機能が必要でない限り、私はattr関数を使用して対話しますdata-xyz属性。）

このattr関数は、文字どおりに属性を取得するのではなく、ユーザーが望んでいるものを取得するための複雑なロジックを使用していました。それは概念を融合させました。移動してprop、attrそれらをデコンフレートすることを意図していました。簡単に言うと、v1.6.0でjQueryはその点で行き過ぎでしたが、技術的に使用する必要があるときattrに人々が使用する一般的な状況を処理するために機能がすばやく追加されました。attrprop

この変更は、jQueryにとって長い間続いてきました。何年もの間、それらはattr()名前から期待される結果ではなく、ほとんどがDOMプロパティを取得するという名前の関数で満足してきました。との分離はattr()、prop()HTML属性とDOMプロパティの間の混乱の一部を軽減するのに役立ちます。$.fn.prop()指定されたDOMプロパティを$.fn.attr()取得し、指定されたHTML属性を取得します。

それらがどのように機能するかを完全に理解するために、HTML属性とDOMプロパティの違いについての詳細な説明を次に示します。

HTML属性

構文：

<body onload="foo()">

目的： イベント、レンダリング、その他の目的で、マークアップにデータを関連付けることができます。

視覚化： クラス属性はここに本文で表示されます。次のコードからアクセスできます。

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

属性は文字列形式で返され、ブラウザ間で一貫性がない場合があります。ただし、状況によっては重要な場合があります。上記で例示したように、IE 8互換モード（およびそれ以下）では、属性名ではなく、get / set / removeAttributeにDOMプロパティの名前が必要です。これは、違いを知ることが重要である多くの理由の1つです。

DOMプロパティ

構文：

document.body.onload = foo;

目的： 要素ノードに属するプロパティへのアクセスを提供します。これらのプロパティは属性に似ていますが、JavaScriptを介してのみアクセスできます。これは、DOMプロパティの役割を明確にするのに役立つ重要な違いです。このイベントハンドラーの割り当ては役に立たず、イベントを受信しないため、属性はプロパティとは完全に異なることに注意してください（ボディにはonloadイベントがなく、onload属性しかない）。

視覚化：

ここで、Firebugの[DOM]タブの下にあるプロパティのリストに気づくでしょう。これらはDOMプロパティです。あなたはそれを知らずに以前に使用したことがあるので、すぐにそれらのかなりの数に気付くでしょう。それらの値は、JavaScriptを介して受け取るものです。

ドキュメンテーション

• JavaScript：David Flanaganによる決定的なガイド
• HTML属性、Mozilla Dev Center
• DOM Element Properties、Mozilla Dev Center

例

HTML： <textarea id="test" value="foo"></textarea>

JavaScript： alert($('#test').attr('value'));

以前のバージョンのjQueryでは、これは空の文字列を返します。1.6では、適切な値を返しますfoo。

どちらの関数の新しいコードもちらりと見なくても、混乱はコード自体よりもHTML属性とDOMプロパティの違いに関係があると確信できます。うまくいけば、これはあなたのためにいくつかのことを片付けました。

-マット

プロパティはDOMにあります。属性はHTML内にあり、DOMに解析されます。

さらに詳細

属性を変更すると、変更はDOMに反映されます（名前が異なる場合があります）。

例：classタグの属性を変更するclassNameと、DOM内のそのタグのプロパティが変更されます。タグに属性がない場合でも、対応するDOMプロパティは空またはデフォルト値のままです。

例：タグにclass属性がありませんが、DOMプロパティにclassNameは空の文字列値が存在します。

編集する

一方を変更すると、もう一方もコントローラーによって変更され、その逆も同様です。このコントローラーはjQueryではなく、ブラウザーのネイティブコードにあります。

混乱を引き起こすのは、HTML属性とDOMオブジェクトの違いだけです。A、このようなDOM要素のネイティブプロパティに快適な演技をしているものについてthis.src this.value this.checkedなど、.prop家族への非常に暖かい歓迎です。他の人にとっては、それは単なる混乱の追加層です。それを明らかにしましょう。

違いを確認する最も簡単な方法.attrとは.prop、次の例です：

<input blah="hello">

1. $('input').attr('blah')：'hello'期待どおりに戻ります。ここには驚きはありません。
2. $('input').prop('blah')：戻りますundefined-実行しようとしているため[HTMLInputElement].blah-そのDOMオブジェクトにはそのようなプロパティは存在しません。それはその要素の属性としてスコープにのみ存在します。[HTMLInputElement].getAttribute('blah')

次のように変更します。

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah')：'apple'ええと返す？これがその要素に最後に設定されたので、なぜ「梨」ではないのですか。プロパティは、DOM入力要素自体ではなく、入力属性で変更されたため、基本的に互いに独立して動作します。
2. $('input').prop('blah')： 戻り値 'pear'

事は、あなたは本当にただあると注意する必要があり、アプリケーション全体で同じプロパティに対してこれらの使用を混在させないでください上記の理由。

違いを示すフィドルを参照してください： http : //jsfiddle.net/garreh/uLQXc/

.attrvs .prop：

ラウンド1：スタイル

<input style="font:arial;"/>

• .attr('style') -一致した要素のインラインスタイルを返します。 "font:arial;"
• .prop('style') -スタイル宣言オブジェクトを返しますすなわち CSSStyleDeclaration

ラウンド2：値

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')-を返します'hello'*
• .prop('value') - 戻り値 'i changed the value'

*注：このためjQueryには.val()メソッドがあり、内部的には.prop('value')

TL; DR

ほとんどの場合に使用prop()しattr()ます。

プロパティは、入力要素の現在の状態です。属性にはデフォルト値です。

プロパティには、さまざまなタイプのものを含めることができます。属性には文字列のみを含めることができます

汚れたチェック

この概念は、違いが観察できる例を提供します：http : //www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

やってみて：

• ボタンをクリックします。両方のチェックボックスがオンになりました。
• 両方のチェックボックスをオフにします。
• もう一度ボタンをクリックします。propチェックボックスだけがチェックされました。バン！

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

disabledon buttonなどの一部の属性では、http：//www.w3.org/TR/html5/forms.html#attr-fe-disabledが次のように言うdisabled="disabled"ため、content属性を追加または削除すると、常にプロパティ（HTML5ではIDL属性と呼ばれます）が切り替わります。

無効化されたIDL属性は、無効化されたコンテンツ属性を反映する必要があります。

必要なくHTMLを変更するので醜いですが、それでうまくいくかもしれません。

checked="checked"onのような他の属性についてinput type="checkbox"は、一度クリックするとダーティになり、checked="checked"content属性を追加または削除してもチェック状態が切り替わらないため、問題が発生します。

これは.prop、HTMLの変更による複雑な副作用に依存するのではなく、効果的なプロパティに直接影響するため、ほとんどを使用する必要がある理由です。

すべてはドキュメントにあります：

特定の状況では、属性とプロパティの違いが重要になる場合があります。jQuery 1.6より前のバージョンでは、一部の属性を取得するときに.attr（）メソッドでプロパティ値が考慮されることがあり、これにより一貫性のない動作が発生する可能性がありました。jQuery 1.6以降、.prop（）メソッドはプロパティ値を明示的に取得する方法を提供し、.attr（）は属性を取得します。

小道具を使用してください！

属性はHTML テキストドキュメント/ファイルにあります（==これが解析されたhtmlマークアップの結果であると想像してください）。一方、
プロパティはHTML DOMツリーにあります（==基本的にJSの意味でのいくつかのオブジェクトの実際のプロパティ）。

重要なことに、それらの多くは同期されます（classプロパティを更新するとclass、htmlの属性も更新されます;そうでなければ）。ただし、一部の属性は予期しないプロパティに同期される場合があります。たとえば、属性 checkedはプロパティ defaultCheckedに対応するため、

• 手動で変更されますチェックボックスをチェック.prop('checked')値を、しかし、変更されません.attr('checked')し、.prop('defaultChecked')値
• 設定$('#input').prop('defaultChecked', true)も変更されますが.attr('checked')、これは要素には表示されません。

経験法則は次のとおりです。.prop()メソッドは、ブール型の属性/プロパティと、htmlに存在しないプロパティ（window.locationなど）に使用する必要があります。他のすべての属性（htmlで確認できる属性）は、.attr() メソッドで引き続き操作できます。（http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/）

そして、これ.prop()は（.attr()まだ使用できるとしても）どこが好ましいかを示す表です。

.attr（）の代わりに.prop（）を使用する必要があるのはなぜですか？

1. .prop()文字列、整数、ブール値の任意のタイプを返すことができます。一方、.attr()常に文字列を返します。
2. .prop()は、の約2.5倍の速度であると言われています.attr()。

.attr()：

• 一致する要素のセットの最初の要素の属性の値を取得します。
• ページの読み込み時にHTMLで定義された要素の値を提供します

.prop()：

• 一致する要素のセットの最初の要素のプロパティの値を取得します。
• javascript / jqueryによって変更された要素の更新された値を提供します

通常は、プロパティを使用します。次の場合にのみ属性を使用します。

1. カスタムHTML属性の取得（DOMプロパティと同期されていないため）。
2. DOMプロパティと同期しないHTML属性を取得します。たとえば、次のように、標準のHTML属性の「元の値」を取得します。 <input value="abc">.

attributes -> HTML

properties -> DOM

jQuery 1.6より前のバージョンでは、attr()メソッドは属性を取得するときにプロパティ値を考慮に入れることがあり、これにより動作に一貫性がなくなりました。

prop()メソッドの導入により、.attr()属性を取得しながらプロパティ値を明示的に取得する方法が提供されます。

ドキュメント：

jQuery.attr() 一致する要素のセットの最初の要素の属性の値を取得します。

jQuery.prop() 一致する要素のセットの最初の要素のプロパティの値を取得します。

の使用について注意深く思い出させてくださいprop()。例：

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上記の関数は、checkbox1がチェックされているかどうかをチェックするために使用されます。チェックされている場合：return 1; そうでない場合：0を返します。ここでは、GET関数として使用される関数prop（）を使用しています。

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上記の関数は、checkbox1がチェックされるように設定するために使用され、常に1を返します。現在、関数prop（）はSET関数として使用されています。

失敗しないでください。

P / S：Image srcプロパティをチェックしているとき。srcが空の場合、propはページの現在のURL（間違った）を返し、attrは空の文字列（右）を返します。

.attr()できないことの1つは、.prop()CSSセレクターに影響を与えることです。

他の回答では見られなかった問題を以下に示します。

CSSセレクター [name=value]

• に応答します .attr('name', 'value')
• しかし常にではない .prop('name', 'value')

.prop() 少数の属性セレクターのみに影響します

• input[name] （@TimDownに感謝）

.attr() すべての属性セレクターに影響します

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute]（どちらも.data('custom-attribute')このセレクターには影響しません）

1）プロパティはDOMにあります。属性はHTML内にあり、DOMに解析されます。

2）$（elem）.attr（ "checked"）（1.6.1+） "checked"（String）チェックボックスの状態で変化します

3）$（elem）.attr（ "checked"）（1.6より前）true（ブール値）チェックボックスの状態で変更

• ほとんどの場合、のようなカスタム属性ではなく、DOMオブジェクトに使用しますdata-img, data-xyz。

• また、checkbox値にアクセスするときhref 、attr()および完全なリンク元とチェックボックスの値を含む prop()DOM出力で変更 するときの違いの一部prop()originBoolean(pre-1.6)

• DOM要素にアクセスできるのはprop他の要素のみです。undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

prop（）とattr（）には、さらにいくつかの考慮事項があります。

• selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、およびdefaultSelected..etcは、.prop（）メソッドを使用して取得および設定する必要があります。これらは対応する属性を持たず、単なるプロパティです。

• 入力タイプのチェックボックス

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• propメソッドは、checked、selected、disabled、readOnly..etcのブール値を返しますが、attrは定義された文字列を返します。そのため、if条件で.prop（ 'checked'）を直接使用できます。

• .attr（）は内部で.prop（）を呼び出すため、.attr（）メソッドは.prop（）を介して直接アクセスするよりも少し遅くなります。

Gary Holeの回答は、コードがこのように記述されている場合、問題を解決するのに非常に適切です

obj.prop("style","border:1px red solid;")

prop関数はCSSStyleDeclarationオブジェクトを返すので、上記のコードは一部のブラウザーで正しく機能しません（IE8 with Chrome Frame Plugin私の場合はテスト済み）。

したがって、次のコードに変更します

obj.prop("style").cssText = "border:1px red solid;"

問題を解決しました。