web-dev-qa-db-ja.com

.prop（）と.attr（）

そのため、 jQuery 1.6 に新しい関数 prop() が追加されました。

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

それともこの場合、彼らは同じことをするのですか？

そして、もし私がdoをprop()を使うように切り替えなければならないとしたら、私が1.6に切り替えれば古いattr()の呼び出しはすべて壊れるでしょうか？

_ update _ 

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として記録します、なぜですか？そしてそれは将来の私のコーディングにどのように影響しますか？

javascriptjquerydomattrprop
2180
Neal

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プロパティは数値です。
  • 同じ名前のプロパティと属性の両方が存在する場合、通常、一方を更新すると他方も更新されますが、これらの属性のvalueおよびchecked：などの入力の特定の属性の場合はそうではありません、プロパティは常に現在の状態を表しますが、属性（IEの古いバージョンを除く）は入力のデフォルト値/チェックに対応します（defaultValue/defaultCheckedプロパティに反映）。
  • この変更により、属性とプロパティの前にあるマジックjQueryのレイヤーの一部が削除されます。つまり、jQuery開発者はプロパティと属性の違いについて少し学ぶ必要があります。これは良いことです。

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

プロパティが属性よりも簡単に処理される方法の例として、最初にチェックされるチェックボックスを検討します。これを行うための有効なHTMLの2つの可能な部分を次に示します。

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

それでは、jQueryでチェックボックスがチェックされているかどうかをどのように確認しますか？スタックオーバーフローを見ると、一般的に次の提案が見つかります。

  • 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/ を参照してください。
1839
Tim Down

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

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

HTMLの属性

構文：

<body onload="foo()">

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

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

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

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

DOMのプロパティ

構文：

document.body.onload = foo;

目的： 要素ノードに属するプロパティへのアクセスを許可します。これらのプロパティは属性と似ていますが、JavaScriptを介してのみアクセス可能です。これはDOMプロパティの役割を明確にするのに役立つ重要な違いです。 このイベントハンドラの割り当ては役に立たず、イベントを受け取らないため、属性はプロパティ とはまったく異なることに注意してください。

視覚化：  DOM Properties

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

ドキュメンテーション

例

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

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

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

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

- マット

242
user1385191

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

さらなる詳細

属性を変更すると、その変更はDOMに反映されます（場合によっては異なる名前で）。

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

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

編集

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

238
yunzen

混乱を招くのは、HTML属性とDOMオブジェクトの違いだけです。 this.srcthis.valuethis.checkedなどのDOM要素のネイティブプロパティに慣れている人にとって、.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入力要素自体ではなくinput属性で変更されたため、それらは基本的に互いに独立して機能します。
  2. $('input').prop('blah')：'pear'を返します

あなたが本当に注意する必要があるのは上記の理由のためだけのアプリケーション全体で同じプロパティのためにこれらの使用法を混ぜないでくださいです。

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

.attrと.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')と同等です。

135
Gary Green

TL; DR

ほとんどの場合、prop()よりattr()を使います。

property は入力要素の現在の状態です。 属性 がデフォルト値です。

プロパティにはさまざまな種類のものを含めることができます。属性には文字列しか含めることができません

50
agjmills

ダーティーチェックネス

この概念は、違いが観察可能な例を提供します。 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>

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

Disabled IDL属性はdisabledコンテンツ属性を反映しなければなりません。

それであなたはそれを回避するかもしれません、それが必要なしにHTMLを修正するのでそれは醜いですが。

checked="checked"のinput type="checkbox"のような他の属性では、それをクリックすると汚くなり、checked="checked"コンテンツ属性 を追加または削除してもチェックされなくなります 。

HTMLを変更するという複雑な副作用に頼るのではなく、効果的なプロパティに直接影響を与えるので、ほとんどの場合.propを使用する必要があるのはこのためです。

35
Ciro Santilli 新疆改造中心996ICU六四事件

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

属性とプロパティの違いは、特定の状況では重要になる可能性があります。 jQuery 1.6より前では、.attr（）メソッドはいくつかの属性を取得するときにプロパティ値を考慮に入れることがありました。 jQuery 1.6以降、.prop（）メソッドは明示的にプロパティ値を取得する方法を提供しますが、.attr（）は属性を取得します。

だから支柱を使用してください！

32
Arnaud F.

attributes はあなたのHTMLの中にありますtext document/file（==これはあなたのhtmlマークアップがパースされた結果だと思います）
properties はHTML DOM tree（===基本的にはJSの意味でのあるオブジェクトの実際のプロパティ）にあります。

重要なことに、それらの多くは同期されています（classプロパティを更新すると、htmlのclass属性も更新されます。それ以外の場合）。 しかし いくつかの属性は予期しないプロパティと同期されるかもしれません - 例えば、 attribute checkedは property 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()がまだ使われることができるとしても）。

table with preferred usage

なぜ後者が正式に推奨されているのに.attr（）の代わりに.prop（）を使用したいと思うのでしょうか。

  1. .prop()は任意の型を返すことができます - 文字列、整数、ブール値。 .attr()は常に文字列を返します。
  2. .prop()は.attr()の約2.5倍速いと言われています。
26
lakesare

.attr()：

  • 一致した要素の集合の最初の要素について、 attribute の値を取得します。
  • ページロード時にhtmlで定義された要素の値を取得します

.prop()：

  • 一致した要素の集合の最初の要素について property の値を取得します。
  • Javascript/jqueryで変更された要素の更新値を渡します
18
Kgn-web

通常はプロパティを使いたいでしょう。次の目的にのみ属性を使用してください。

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

attributes - > HTML

properties - > DOM

7
NkS

JQuery 1.6より前では、attr()メソッド 時々 は属性の取得時にプロパティ値を考慮していましたが、これはかなり矛盾した振る舞いを引き起こしました。

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

ドキュメント：

jQuery.attr()マッチした要素の集合の中の最初の要素の属性値を取得します。

jQuery.prop()マッチした要素の集合の最初の要素のプロパティ値を取得します。

6
Gothburz

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

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

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

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

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

めちゃくちゃにしないでください

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

2
user2657778

jQuery 1.6では.prop（）関数が導入され、DOMの属性とプロパティが分離され、.attrと.prop関数の違いについて多くの疑問が投げかけられました。

下記の例を参照してください。

例：1）

<input id="demo" type="text" dbvalue="Kansagara" />

$("#demo").attr("dbvalue");   // returns Kansagara
$("#demo").prop("dbvalue");   // returns undefined

.prop（）はHTML DOM属性のみの値を返しますが、カスタム属性の値は返しませんでしたが、.attr（）も上記のカスタム属性値を返します。

例：2）

<input id="demo" type="text" value="Kansagara" />

さて、テキストボックスの中の「カンサガラ」を「ハイテッシュ」に変更しました。

$("#demo").attr("value");   // returns Kansagara
$("#demo").prop("value");   // returns Hitesh

今、あなたはそれが何を意味するのかを考えました。 DOM内にあり動的であるため、要素のプロパティのみが変更されます。しかし、要素の属性はHTMLテキスト内にあり、変更することはできません。広い意味では、属性は常に現在の状態を表し、属性（古いバージョンのIEを除く）は初期状態を表すか、厳密に定義されているためhtml属性を意味します。この属性は現在の状態について何も伝えません。

チェックボックス用（jquery 1.6以降）

<input id="check1" checked="checked" type="checkbox" />

.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（）を介して直接アクセスするよりもわずかに遅くなります。

JQuery 1.6以降では、propが単純でattrよりも幅が広いため、propが主に使用されます。ほとんどの古いプロジェクトでは、attrは要素の現在の状態情報を取得するために使用されます。しかし今度はpropはこの仕事を引き継ぎ、attrはpropに置き換えられます。

それが役に立てば幸い。

2
Hitesh Kansagara

.attr()でできること.prop()でできないこと：CSSセレクターに影響を与える

他の回答には見られなかった問題があります。

CSSセレクター[name=value]

  • .attr('name', 'value')に応答します
  • 常にではありません.prop('name', 'value')

.prop()は、いくつかの属性セレクターのみに影響します

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

0
Bob Stein

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

2）$（elem）.attr（ "checked"）（1.6.1+） "checked"（String）チェックボックスの状態によって変わります

3）$（elem）.attr（ "checked"）（1.6以前）true（Boolean）チェックボックスの状態で変更

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

  • チェックボックス(pre-1.6)からのcheckboxおよびhref値へのフルリンクとしてのattr()を持つDOM出力では、Origin値およびBooleanにprop()およびprop()を付けてアクセスする場合の違いもあります

  • DOM要素にアクセスできるのはprop otherだけです。それから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>
0
Parth Trivedi