.prop() vs .attr()

source

.prop() vs .attr()

gigabyte 2022. 12. 8. 21:22

.prop() vs .attr()

그래서 jQuery 1.6에는 새로운 기능이 있습니다.

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

아니면 같은 일을 하는 걸까요?

그리고 만약 내가 이 기능을 사용해야 한다면prop() , 「」attr()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되지만, 「」「」「」「」「」입니다.prop로 CSSStyleDeclaration왜요? 그게 앞으로 제 코딩에 어떤 영향을 미칩니까?

업데이트 2012년 11월 1일

원래 답변은 jQuery 1.6에만 적용됩니다.제 조언은 그대로입니다만, jQuery 1.6.1은 상황을 약간 변화시켰습니다.예를 들어, 망가진 웹 사이트의 예측에 직면했을 때, jQuery 팀은 Boolean 속성의 낡은 동작에 가까운 것(정확히 같은 것은 아닙니다)으로 돌아갔습니다.존 레식도 그것에 대해 블로그에 올렸다.나는 그들이 처한 어려움을 알 수 있지만 여전히 그가 선호하는 권고에 동의하지 않는다.attr().

원답

DOM을 직접 사용하지 않고 jQuery만 사용한 경우 개념적으로 확실히 개선되었지만 혼란스러울 수 있습니다.그러나 이 변경으로 인해 망가지는 jQuery를 사용하는 수많은 사이트에는 그다지 좋지 않습니다.

주요 이슈를 요약합니다.

은 보통 ★★★★★★★★★★★★★를 원합니다.prop()attr().
의 경우, '아예'는prop() 일입니까?attr()「」. 「」에의 콜의 attr()prop()일반적으로 동작합니다.
속성은 일반적으로 속성보다 다루기 쉽습니다.속성 값은 문자열만 사용할 수 있지만 속성은 모든 유형일 수 있습니다.를 들면, 「」는,checked는 Boolean(부울입니다.style을 가진 입니다.size입니다.
Atribute가 존재하는 , 한쪽이 Atribute에 .value ★★★★★★★★★★★★★★★★★」checked: 은 항상 , IE 는).defaultValuedefaultChecked★★★★★★★★★★★★★★★★★★」
이 변경에 의해 속성과 속성 앞에 있는 magic jQuery의 레이어 일부가 삭제됩니다.즉, jQuery 개발자는 속성과 속성의 차이에 대해 조금 배워야 합니다.이건 좋은 일이야.

만약 당신이 jQuery 개발자이고 이 비즈니스 전체에 대해 속성과 속성에 대해 혼란스럽다면, jQuery는 더 이상 당신을 보호하려고 노력하지 않기 때문에 한 걸음 물러서서 그것에 대해 조금 배울 필요가 있다.이 주제에 대한 권위적이지만 다소 무미건조한 단어에 대해서는 DOM4, HTML DOM, DOM 레벨 2, DOM 레벨 3의 사양이 있습니다.Mozilla의 DOM 문서는 대부분의 최신 브라우저에 유효하며 사양보다 읽기 쉬우므로 DOM 참조가 도움이 될 수 있습니다.요소 특성에 대한 섹션이 있습니다.

속성이 속성보다 처리하기가 얼마나 간단한지 보여주는 예로서 처음에 선택되어 있는 확인란을 고려하십시오.이를 위해 사용할 수 있는 유효한HTML의 2가지를 다음에 나타냅니다.

<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
Atribute 값은 현재 표시 상태가 아닌 기본값을 반영합니다(일부 오래된 버전의 IE는 제외되므로 상황은 더욱 어려워집니다).Atribut은 페이지의 체크박스가 켜져 있는지 여부에 대해 알 수 없습니다.http://jsfiddle.net/VktA6/49/ 를 참조해 주세요.

Tim이 꽤 잘 말한 것 같은데, 한발 물러선다.

DOM 요소는 기억 속의 객체입니다.OOP의 대부분의 개체와 마찬가지로 속성이 있습니다.또, 요소에 정의되어 있는 어트리뷰트의 맵도 있습니다(통상, 요소를 작성하기 위해서 브라우저가 읽어낸 마크업으로부터 취득됩니다).요소의 속성 중 일부는 이름이 같거나 유사한 속성에서 초기 값을 가져옵니다().value 「를 취득합니다.「 value 」는, 「value」의 어트리뷰트입니다.href 「하고 있습니다만, 같은 은 아닙니다.「 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" || 이름 : "foo Anchor" || id: "foo Anchor" || className : "test 1" || 속성: || href: "foo.filen" || 이름 : "foo Anchor" || id: "foo Anchor" || 클래스: "테스트 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 코어 (표준)
DOM3 코어 (표준)
DOM4

이 사양은 색인이 뛰어나기 때문에 링크를 쉽게 사용할 것을 권장합니다.항상 사용하고 있습니다.

에는 예를의 어트리뷰트가 data-xyz코드에 하기 위해 할 수 합니다)data-prefix에 접속할 수 버전에서는 (jQuery)에 할 수 .data-xyz를 data이 기능은 단순한 접근기만이 아닙니다.data-xyz의 기능을 한, 그 기능을할 수 .attr data-xyz이치노

attr함수는 문자 그대로 속성을 얻는 것이 아니라 그들이 원하는 것을 얻는 것에 대해 복잡한 논리를 가지고 있었습니다.념들개동처로 prop ★★★★★★★★★★★★★★★★★」attr그들의 신념을 깨기 위한 거였어요v1.6.0에서는 jQuery가 이 점에서 너무 멀리까지 갔지만, 기능은 에 빠르게 추가되었습니다.attr으로 attr 말하면, 「」, 「」를 사용할 가 있는 경우.prop.

jQuery는 jQuery를 사용합니다.몇 년 ', '아까', '아까', '아까'라는 함수에 .attr()DOM 속성을 가장 많이 검색했지만 이름에서 예상할 수 있는 결과는 아니었습니다.및 을 분리하면 HTML 속성과 DOM 속성 간의 혼동을 어느 정도 완화할 수 있습니다. $.fn.prop()는, 한 DOM 해, 「DOM」을 취득합니다.$.fn.attr()HTML Attribute를 사용합니다.

HTML 속성과 DOM 속성의 차이에 대한 자세한 설명은 다음과 같습니다.

HTML 속성

구문:

<body onload="foo()">

목적:마크업에 이벤트, 렌더링 및 기타 목적으로 데이터를 연결할 수 있습니다.

★★★★★★★★★★★★★★★★★★: HTML 속성 이치노하다

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 속성의 역할을 명확히 하는 데 도움이 되는 중요한 차이입니다.이 이벤트 핸들러 할당은 사용할 수 없고 이벤트를 수신하지 않으므로 속성은 속성과 완전히 다릅니다(본문에는 온로드 이벤트가 없고 온로드 속성만 있음).

시각화: DOM 속성

Firebug의 "DOM" 탭에 속성 목록이 표시됩니다.이것들은 DOM 속성입니다.모르는 사이에 사용한 적이 있기 때문에, 그 중 상당수는 금방 알 수 있을 것입니다.이러한 값은 JavaScript를 통해 얻을 수 있는 값입니다.

문서

예

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

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

jQuery의 jQuery의 jQuery는 jQuery를 사용합니다.1값인 1.6을 합니다.foo.

어느 함수의 새로운 코드를 훑어보지 않아도, 이 혼란은 코드 자체보다는 HTML 속성과 DOM 속성의 차이와 더 관련이 있다고 자신 있게 말할 수 있습니다.이걸로 뭔가 해결됐으면 좋겠네요

- 매트

속성은 DOM에 있고 속성은 DOM에 구문 분석된HTML에 있습니다.

상세

속성을 변경하면 변경 내용이 DOM에 반영됩니다(경우에 따라 다른 이름을 사용).

[ ] : [ ]의 변경class Attribute가 됩니다.className의 그 의 경우class의태그에 Atribute가 없는 경우에도 대응하는 DOM 속성은 빈 값 또는 기본값입니다.

에 「」가 없는 .class 속성, DOMclassName빈 문자열 값으로 존재합니다.

편집하다

한쪽을 변경하면 다른 한쪽이 컨트롤러에 의해 변경됩니다.또 한쪽은 컨트롤러에 의해 변경됩니다.이 컨트롤러는 jQuery가 아니라 브라우저의 기본 코드에 있습니다.

HTML DOM DOM 입니다. 속성으로 에게는, DOM 의 네이티브 .this.src this.value this.checked 타,,.prop가족에게 매우 따뜻한 환영입니다.다른 사람들에게는, 단지 혼란의 층이 더해져 있을 뿐입니다.그 점을 명확히 합시다.

차이를 알 수 있는 .attr ★★★★★★★★★★★★★★★★★」.prop하다

<input blah="hello">

$('input').attr('blah'): 반환'hello'놀랄 일이 아니다.놀라지 마세요.
$('input').prop('blah'): 반환undefined[HTMLInputElement].blah그 속성이 존재하지 않습니다.-- 「 DOM 」、「 DOM 」스코프에는 해당 요소의 속성으로만 존재합니다. [HTMLInputElement].getAttribute('blah')

이제 다음과 같은 몇 가지 사항을 변경합니다.

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

$('input').attr('blah'): 반환'apple'왜 '안 되는 거죠 '눈치'가 요? 이 부분은 그 요소에서 마지막으로 설정됐으니까.속성이 DOM 입력 요소 자체가 아닌 입력 속성으로 변경되었기 때문에 기본적으로 서로 독립적으로 작동합니다.
$('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') --syslogs'hello'*
.prop('value') --syslogs'i changed the value'

이 에는 *가 있습니다.「 jQuery 」.val()방법, 내부적으로는 다음과 같습니다..prop('value')

TL;DR

prop()에 걸쳐서attr()대부분의 경우.

속성은 입력 요소의 현재 상태입니다.Atribute가 기본값입니다.

속성은 다른 유형의 것을 포함할 수 있습니다.속성은 문자열만 포함할 수 있습니다.

더티 체크니스

이 개념에서는 차이를 알 수 있는 예를 제시합니다.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>

음음음음음음 for for for for for for for for for 등의 속성의 disabledbutton 애트리뷰트 " " " 삭제disabled="disabled"는 항상 속성을 토글합니다(HTML5 에서는 IDL 어트리뷰트라고 불립니다).이것은, http://www.w3.org/TR/html5/forms.html#attr-fe-disabled 에서는 다음과 같이 기술되어 있기 때문입니다.

디세이블 IDL 아트리뷰트는 디세이블 콘텐츠아트리뷰트를 반영해야 합니다.

HTML을 불필요하게 수정하기 때문에 보기 흉하지만, 그냥 넘어갈 수도 있습니다.

등의 :checked="checked"input type="checkbox"은 한번 에 망가져 때문에, 그 다음에 , 음, 음, 음, 음, 음, 음, 음, 가, the, the, the, the, the, the, the, the, the, the, the, , the, the, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,,checked="checked"content Attribute가 체크네스를 전환하지 않게 되었습니다.

이것이 당신이 주로 사용해야 하는 이유입니다..propHTML 수정의 복잡한 부작용에 의존하지 않고 유효 속성에 직접 영향을 미치기 때문입니다.

모두 문서에 기재되어 있습니다.

속성과 속성 간의 차이는 특정 상황에서 중요할 수 있습니다.jQuery 1.6 이전 버전에서는 .attr() 메서드가 일부 Atribute를 취득할 때 속성 값을 고려하는 경우가 있었습니다.그 때문에, 부정합이 발생할 가능성이 있습니다.jQuery 1.6에서 .prop() 메서드는 속성 값을 명시적으로 취득하는 방법을 제공하는 반면 .attr()은 속성을 취득합니다.

소품을 사용하세요!

속성은 HTML 텍스트 문서/파일에 있습니다(== 구문 분석된 HTML 마크업의 결과라고 상상하십시오).
속성은 HTML DOM 트리에 있습니다(기본적으로 JS 의미에서 일부 개체의 실제 속성).

것은 이들 중되어 있다는 입니다(업데이트를 동기화되어 있습니다).class 「」,classhtml의 속성도 갱신됩니다.그 이외의 경우도 갱신됩니다).그러나 일부 속성이 예기치 않은 속성과 동기화될 수 있습니다(예: 속성). checked속성에 대응하다 defaultChecked

.prop('checked') 변경되지 않습니다..attr('checked') ★★★★★★★★★★★★★★★★★」.prop('defaultChecked')(values
$('#input').prop('defaultChecked', true).attr('checked')되지 않습니다.

경험의 법칙:.prop()메서드는 부울 속성/속성 및 html에 존재하지 않는 속성(window.location 등)에 사용해야 합니다.의 모든 어트리뷰트 에 되어 있는 어트리뷰트)는, 「html」(html) 「」, 「Da」의 어트리뷰트를 조작할 수 있습니다..attr()방법.(http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

여기 ..prop() (비록,.attr()을 참조)

후자가 공식적으로 어드바이스 되는 경우, 왜 때때로 .attr() 대신 .prop()를 사용하려고 합니까?

.prop()는 문자열, 등의 유형을 할 수 , 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」의 어느 타입도 반환할 수 있습니다..attr()는 항상 문자열을 반환합니다.
.prop()는 2. 있습니다..attr().

.attr():

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
페이지 로드 시 html에 정의된 요소의 값을 제공합니다.

.prop():

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

보통 부동산 사용을 원할 것입니다.속성만 사용:

사용자 정의 HTML 속성을 가져옵니다(DOM 속성과 동기화되지 않았으므로).
를 들어, 표준 value」를 취득한다.예를 들어, HTML Atribute의 「original value」를 취득한다.<input value="abc">.

attributes -> HTML

properties-> DOM

1.6에서는 jQuery 1.6은attr()메서드는 속성을 검색할 때 속성 값을 고려하는 경우가 있으며, 이로 인해 다소 일관성 없는 동작이 발생합니다.

「」의 prop() method는 속성값을 취득하는 방법을 제공합니다..attr()속죄하다

문서:

jQuery.attr()일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.

jQuery.prop()일치하는 요소 집합의 첫 번째 요소에 대한 특성 값을 가져옵니다.

가지 ★★★★`.attr()` 할 수 있다`.prop()`수 없다: CSS 을 주다: CSS 셀렉터

다른 답변에서는 볼 수 없었던 문제가 있습니다.

셀렉터 CSS " " "[name=value]

.attr('name', 'value')
꼭 할 수 없다.prop('name', 'value')

.prop()입니다.

input[name] (감사합니다 @TimDown)

.attr()all attribute-selectors( Attribute-Selectors)(Attribute-Selector)에을 줍니다.

input[value]
input[naame]
span[name]
input[data-custom-attribute] (유언).data('custom-attribute')셀렉터에 을 줍니다).

을 주의해 주세요.prop() : :

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

위의 함수는 체크박스1이 켜져 있는지 여부를 확인하는 데 사용됩니다.체크박스를 켜면 1을 반환하고 켜지 않으면 0을 반환합니다.여기서 GET 함수로 사용되는 함수 prop().

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

위의 함수는 확인란 1을 선택하고 항상 1을 반환하는 데 사용됩니다.이제 함수 prop()가 SET 함수로 사용됩니다.

망치지 마세요.

P/S: Image src 속성을 확인할 때.src가 비어 있는 경우 prop는 페이지의 현재 URL(잘못됨)을 반환하고 attr은 빈 문자열(오른쪽)을 반환합니다.

1) 속성은 DOM에 있고 속성은 DOM에 구문 분석된HTML에 있습니다.

2) $(elem).attr("체크") (1.6.1+) "체크" (String) 체크박스 상태에 따라 변경됨

3) $(elem).attr('체크') (1.6 이전) true(부울) 체크박스 상태로 변경됨

보다 DOM 오브젝트를 .data-img, data-xyz.
, 액세스 할 .checkbox 및 ""hrefattr() ★★★★★★★★★★★★★★★★★」prop()「DOM」을 사용한 하면,prop()에서 origin ★★★★★★★★★★★★★★★★★」Boolean 값(pre-1.6)
에 액세스 할 수 은, DOM 의 「DOM」 뿐입니다.prop그렇지 않으면 주어지지 않는다

<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() vs attr()에는 몇 가지 고려사항이 있습니다.

선택된인덱스, tagName, nodeName, nodeType, ownerDocument, defaultChecked 및 defaultSelected..etc는 .prop() 메서드로 취득하여 설정해야 합니다.이러한 속성은 대응하는 속성을 가지지 않으며 속성일 뿐입니다.

입력 유형 확인란

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

prop 메서드는 선택된, 선택된, 비활성, 읽기 전용 등에 대한 부울 값을 반환하는 반면 attr은 정의된 문자열을 반환합니다.따라서 조건일 경우 .prop('체크')을 직접 사용할 수 있습니다.
.attr()은 내부적으로 .prop()를 호출하므로 .attr() 메서드는 .prop()을 통해 직접 액세스하는 것보다 약간 느립니다.

Gary Hole의 답변은 코드를 이렇게 작성하면 문제 해결에 매우 적합합니다.

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

가 반환되었기 CSSStyleDeclaration,가 일부 「」가 경우)에서.IE8 with Chrome Frame Plugin(예: ★★★★★★★★★★★★★★★★)

따라서 다음과 같은 코드로 변경

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

문제를 해결했다.

언급URL : https://stackoverflow.com/questions/5874652/prop-vs-attr

'source' 카테고리의 다른 글

도커 업데이트 후 Mysql 테이블이 없음: "TableName이 엔진에 없습니다." (0)	2022.12.18
PHP를 사용하여 한 달 중 처음과 마지막 날짜를 찾는 방법은 무엇입니까? (0)	2022.12.08
phpmyadmin : 의존: php-twig (>= 2.9) 단, 2.6.2-2 가 인스톨 됩니다.뭐라고? (0)	2022.12.08
IPython 노트북 matplotlib 그림을 인라인으로 만드는 방법 (0)	2022.12.08
요소별로 동일한 두 NumPy 어레이 비교 (0)	2022.12.08

현재글.prop() vs .attr()

각종 프로그래밍 정보를 다루는 블로그입니다.

Excel, reactjs, Ajax, MySQL, WordPress, PHP, Java, oracle, spring-boot, Python, C, mariaDB, SWiFT, AngularJS, JavaScript, WPF, vuex, JSON, vuejs2, sql-server,

Today :
Yesterday :

gigabyte

.prop() vs .attr()

.prop() vs .attr()

HTML 속성

구문:

DOM 속성

구문:

문서

예

상세

`.attr` »`.prop`:

1라운드: 스타일

라운드 2: 값

후자가 공식적으로 어드바이스 되는 경우, 왜 때때로 .attr() 대신 .prop()를 사용하려고 합니까?

가지 ★★★★`.attr()` 할 수 있다`.prop()`수 없다: CSS 을 주다: CSS 셀렉터

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

.prop() vs .attr()

.prop() vs .attr()

HTML 속성

구문:

DOM 속성

구문:

문서

예

상세

.attr ».prop:

1라운드: 스타일

라운드 2: 값

후자가 공식적으로 어드바이스 되는 경우, 왜 때때로 .attr() 대신 .prop()를 사용하려고 합니까?

가지 ★★★★.attr() 할 수 있다.prop()수 없다: CSS 을 주다: CSS 셀렉터

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바

`.attr` »`.prop`:

가지 ★★★★`.attr()` 할 수 있다`.prop()`수 없다: CSS 을 주다: CSS 셀렉터