[jQuery] 프로퍼티 설정

• css()

  • 선택한 요소의 집합의 첫 번째 요소의 스타일 속성값을 반환합니다.

    $("#text").html($("p").css("fontSize"))

  • 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정합습니다.

    #("p").css("fontSize", "25px")

• attr()

  • 선택한 요소 집합의 첫 번째 요소의 지정된 속성값을 반환합니다.

    $("#world").attr("title")

  • 선택한 요소의 지정된 속성을 전달받은 값으로 설정합니다.

    $("#world").attr("title", "제목입니다") // title 속성 설정
    .css("color", "red") // css 스타일을 설정

• prop()

  • 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티 값을 반환합니다.

    $("input[value='jquery']").prop("checked")

  • 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정합니다.

    $("input[value='jquery']").prop({
      checked: true
    })

속성와 프로퍼티의 차이점

attr()와 prop()의 차이점을 알기 위해서는 우선 속성(attribute)와 프로퍼티(property)의 차이점을 알아야 합니다.

• 속성: HTML 요소의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 의미합니다.
• 프로퍼티: 속성을 객체화하였을 때의 HTML DOM 트리 내부에서의 값을 가리킵니다.

즉, 속성은 변하지 않지만 프로퍼티의 값은 변할 수 있습니다.