.prop () 대 .attr ()

따라서 jQuery 1.6 에는 새로운 기능이 prop()있습니다.

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

아니면이 경우에도 같은 일을합니까?

그리고 나는 경우 않는 사용하여 스위치에있는 prop()모든 기존 attr()i가 1.6로 전환 할 경우 중단됩니다 전화를?

최신 정보

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문자열로하지만, propA와 CSSStyleDeclaration, 왜? 그리고 이것이 미래의 코딩에 어떤 영향을 미칩니 까?

2012 년 11 월 1 일 업데이트

내 원래 답변은 특히 jQuery 1.6에 적용됩니다. 내 조언은 동일하지만 jQuery 1.6.1은 약간 변경되었습니다. 예전 의 깨진 웹 사이트 더미에서 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는 더 이상이 항목으로부터 사용자를 보호하기 위해 노력하지 않기 때문에 한 걸음 물러서서 약간 배워야합니다. 주제에 대한 권위는 있지만 다소 건조 한 단어에는 DOM4 , HTML DOM , DOM Level 2 , DOM Level 3 사양이 있습니다. Mozilla의 DOM 문서는 대부분의 최신 브라우저에 유효하며 사양보다 읽기 쉽습니다. 따라서 DOM 참조가 도움 이 될 수 있습니다. 요소 속성에 대한 섹션이 있습니다 .

속성보다 속성을 처리하는 것이 더 간단한 방법의 예로 처음에 선택된 확인란을 고려하십시오. 이 작업을 수행 할 수있는 두 가지 유효한 HTML이 있습니다.

<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/를 참조하십시오 .

나는 Tim이 꽤 잘 말했다고 생각 하지만 뒤로 물러서 봅시다.

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 : "테스트 하나"|
| 속성 : |
| href : "foo.html"|
| 이름 : "fooAnchor"|
| id : "fooAnchor"|
| 수업 : "테스트 하나"|
+ ----------------------------------

속성과 속성은 서로 다릅니다.

이제 그것들은 별개이지만,이 모든 것들이 처음부터 설계되기보다는 진화 되었기 때문에, 많은 속성들이 그것들을 설정하면 그들이 파생 한 속성에 다시 쓰여집니다. 그러나 모든 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 코어 (더 이상 사용되지 않음)
• DOM3 코어 (더 이상 사용되지 않음)
• DOM4

이 스펙은 훌륭한 색인을 가지고 있으며 그에 대한 링크를 편리하게 유지하는 것이 좋습니다. 나는 항상 그들을 사용합니다.

예를 들어, 사용자 정의 속성에는 data-xyz코드에 메타 데이터를 제공하기 위해 요소에 추가 할 수 있는 모든 속성이 포함됩니다 (이제 data-접두사 를 고수하는 한 HTML5부터 유효 함 ). (최신 버전의 jQuery data-xyz는 data함수 를 통해 요소에 액세스 할 수 있지만 해당 함수는 속성에 대한 접근 자만 이 아닙니다data-xyz . 실제로 그 기능이 필요하지 않으면 attr함수를 사용하여 상호 작용합니다. 와 data-xyz속성.)

이 attr함수는 문자 그대로 속성을 얻는 것이 아니라 원하는 것을 얻는 것에 대한 복잡한 논리를 사용했습니다. 그것은 개념을 혼란시켰다. 에 이동 prop및 attr해제 conflate에게 그들을 의미했다. v1.6.0에서 jQuery는 그 점에서 너무 멀리 나갔지 만 기술적으로 사용해야 할 때 사람들이 사용하는 일반적인 상황을 처리 하기 위해 기능 이 빠르게 다시 추가되었습니다 .attrattrprop

이 변경 사항은 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 Quirks Mode (및 이하)는 속성 이름 대신 get / set / removeAttribute에서 DOM 속성의 이름을 예상합니다. 이것이 차이점을 아는 것이 중요한 이유 중 하나입니다.

DOM 속성

통사론:

document.body.onload = foo;

목적 : 요소 노드에 속하는 속성에 액세스 할 수 있습니다. 이러한 속성은 속성과 비슷하지만 JavaScript를 통해서만 액세스 할 수 있습니다. 이는 DOM 속성의 역할을 명확히하는 데 도움이되는 중요한 차이점입니다. 이 이벤트 핸들러 할당은 쓸모없고 이벤트를 수신하지 않으므로 (본문에는 onload 이벤트가없고 onload 속성 만 있으므로) 속성은 properties 와 완전히 다릅니다 .

심상:

Firebug의 "DOM"탭 아래에 속성 목록이 있습니다. 이것들은 DOM 속성입니다. 당신은 그것을 알지 못하고 이전에 사용 했으므로 즉시 그들 중 상당수를 알 수 있습니다. 그들의 가치는 JavaScript를 통해 받게 될 것입니다.

선적 서류 비치

• JavaScript : David Flanagan의 확실한 안내서
• HTML 속성, Mozilla 개발자 센터
• DOM 요소 속성, Mozilla 개발자 센터

예

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

자바 스크립트 : alert($('#test').attr('value'));

이전 버전의 jQuery에서는 빈 문자열을 반환합니다. 1.6에서는 적절한 값을 반환합니다 foo.

두 함수 중 하나에 대한 새로운 코드를 보지 않고도 혼란은 코드 자체보다 HTML 속성과 DOM 속성의 차이와 더 관련이 있다고 확신 할 수 있습니다. 바라건대, 이것은 당신을 위해 몇 가지를 정리했습니다.

-매트

속성은 DOM에 있습니다. 속성은 DOM으로 구문 분석되는 HTML에 있습니다.

더 자세히

속성을 변경하면 변경 사항이 DOM에 반영됩니다 (때로는 다른 이름으로).

예 : class태그의 className속성을 변경 하면 DOM에서 해당 태그 의 속성 이 변경됩니다 . 태그에 속성이없는 경우에도 비어 있거나 기본값이있는 해당 DOM 속성이 있습니다.

예 : 태그에 class속성 이 없지만 className빈 문자열 값으로 DOM 속성 이 존재합니다.

편집하다

하나를 변경하면 다른 하나는 컨트롤러에 의해 변경되며 그 반대도 마찬가지입니다. 이 컨트롤러는 jQuery가 아니라 브라우저의 기본 코드에 있습니다.

혼란을 일으키는 HTML 속성과 DOM 객체의 차이점 일뿐입니다. 같은 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'eh를 반환 합니까? 이 요소에 마지막으로 설정된 "배"가 아닌 이유 이 속성은 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 과 같은 일부 속성의 경우 http://www.w3.org/TR/html5/forms.html#attr-fe-disabled 는 다음 과 같이 지정 button하므로 content 속성을 추가하거나 제거하면 disabled="disabled"항상 속성 (HTML5에서 IDL 속성이라고 함)이 전환됩니다 .

비활성화 된 IDL 속성은 비활성화 된 콘텐츠 속성을 반영해야합니다.

그래서 HTML을 필요없이 수정하기 때문에 추악하지만, 그것을 피할 수 있습니다.

checked="checked"on 과 같은 다른 속성의 경우 input type="checkbox"한 번 클릭하면 더러워지고 checked="checked"내용 속성 을 추가하거나 제거해도 더 이상 검사가 전환되지 않기 때문에 문제가 발생 합니다.

그렇기 때문에 .propHTML 수정의 복잡한 부작용에 의존하는 대신 효과적인 속성에 직접 영향을 미치기 때문에 주로를 사용해야합니다 .

모두 문서에 있습니다 .

특성과 속성의 차이는 특정 상황에서 중요 할 수 있습니다. jQuery 1.6 이전에는 일부 속성을 검색 할 때 .attr () 메소드가 속성 값을 고려하여 일관성이없는 동작을 유발할 수 있습니다. jQuery 1.6부터 .prop () 메소드는 속성 값을 명시 적으로 검색하는 방법을 제공하는 반면 .attr ()은 속성을 검색합니다.

소품을 사용하십시오!

속성 은 HTML 텍스트 문서 / 파일에 있습니다 (== 이것이 html 마크 업 파싱의 결과라고 상상해보십시오).
속성 은 HTML DOM 트리에 있습니다 (= 기본적으로 JS 의미에서 일부 객체의 실제 속성).

중요하게는 많은 class속성 이 동기화됩니다 ( 속성 을 업데이트하면 classhtml의 속성도 업데이트됩니다). 그러나 예를 들어, - 일부 특성은 예상치 못한 특성에 동기화 할 수있다 속성 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에 정의 된대로 element 값을 제공합니다

.prop():

• 일치하는 요소 집합에서 첫 번째 요소 의 속성 값을 가져 옵니다.
• javascript / jquery를 통해 수정 된 요소의 업데이트 된 값을 제공합니다.

일반적으로 속성을 사용하고 싶을 것입니다. 다음에 대해서만 속성을 사용하십시오.

1. DOM 속성과 동기화되지 않았으므로 맞춤 HTML 속성을 가져옵니다.
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;
}

위의 함수는 확인란 1이 선택되어 있는지 확인하는 데 사용됩니다 (확인 된 경우). return 1; 그렇지 않은 경우 : 0을 반환합니다. 여기서 prop () 함수는 GET 함수로 사용됩니다.

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

위의 함수는 checkbox1을 체크하고 항상 1을 반환하는 데 사용됩니다. 이제 prop () 함수는 SET 함수로 사용됩니다.

엉망하지 마십시오.

추신 : 이미지 src 속성을 확인할 때 . 는 IF SRC가 비어 소품 페이지 (잘못된)의 현재 URL, 반환 ATTR 반환 빈 문자열 (오른쪽).

한 가지는 .attr()그이 할 수있는 .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에 있습니다. 속성은 DOM으로 구문 분석되는 HTML에 있습니다.

2) $ (elem) .attr ( "checked") (1.6.1+) "checked"(String) 확인란 상태에 따라 변경됩니다

3) $ (elem) .attr ( "checked") (1.6 이전) true (Boolean) 확인란 상태로 변경됨

• 주로 우리는와 같은 사용자 정의 속성 대신 DOM 객체에 사용하려고합니다 data-img, data-xyz.

• 또한 차이 중 일부에 접근 할 때 checkbox와 값 href 과 attr()와 prop()함께 DOM 출력을 가지 변화로 prop()전체에서 링크로 origin및 Boolean체크 박스 값 (pre-1.6)

• 우리는 prop다른 것만으로 DOM 요소에 액세스 할 수 있습니다.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 메소드는 확인, 선택, 비활성화, readOnly 등의 부울 값을 반환하고 attr은 정의 된 문자열을 반환합니다. 따라서 if 조건에서 .prop ( 'checked')를 직접 사용할 수 있습니다.

• .attr ()은 내부적으로 .prop ()를 호출하므로 .attr () 메소드는 .prop ()를 통해 직접 액세스하는 것보다 약간 느립니다.

게리 홀 답변은 코드가 그런 식으로 작성된 경우 문제를 해결하는 데 매우 관련이 있습니다.

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

prop 함수가 CSSStyleDeclaration객체를 반환하기 때문에 위의 코드는 일부 브라우저에서 제대로 작동하지 않습니다 ( IE8 with Chrome Frame Plugin필자의 경우 테스트 ).

따라서 다음 코드로 변경

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

문제를 해결했다.