티스토리 뷰

jQuery

[jQuery] .prop()

.prop()

선택한 JavaScript 요소의 속성 값을 설정하거나 반환합니다. .attr()는 HTML의 속성을 설정하고 .prop()는 JavaScript 속성을 설정하는데에 차이점이 있습니다. 이 두개의 메소드는 취급하는 정보가 다릅니다. .attr()는 HTML의 속성(attribute)을 .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드입니다.


.prop()

.prop() 메서드는 JavaScript 요소의 속성 값을 설정하거나 반환합니다..

문법

$("선택자").prop("속성");
$("선택자").prop("속성", "속성값");
$("선택자").prop({"속성":"속성값", "속성":"속성값", .... });
$("선택자").prop("속성", 함수);

정의

  • .prop() 메서드는 선택한 요소의 속성 값을 가져옵니다.
  • .prop() 메서드는 선택한 요소의 속성 값을 변경합니다.
  • .prop() 메서드는 선택한 요소의 여러개 속성 값을 변경합니다.
  • .prop() 메서드는 선택한 요소의 속성과 함수를 설정합니다.

샘플(Sample)

.attr을 이용하여 속성 값을 알아냅니다. 3개의 메서드가 속성을 가져오지만 결과값은 틀립니다. 이 점이 .attr(), .prop(), .is() 메서드의 차이점입니다.

jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $( ".list1 input" ).change(function() {
      var $input = $( this );
      $(".list1 .desc").html( ".attr( \"checked\" ) : " + $input.attr("checked"))
    }).change();
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    $( ".list1 input" ).change(function() {
      var $input = $( this );
      $(".list1 .desc").html( ".prop( \"checked\" ) : " + $input.prop("checked"))
    }).change();
});
$(".choice1 .btn3").on("click", function(e){
    e.preventDefault();
    $( ".list1 input" ).change(function() {
      var $input = $( this );
      $(".list1 .desc").html( ".is( \"checked\" ) : " + $input.is(":checked"))
    }).change();
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <input id="check1" type="checkbox" checked="checked">
    <label for="check1">체크</label>
    <p class="desc"></p>
</div>
Total
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <input id="check1" type="checkbox" checked="checked">
        <label for="check1">체크</label>
        <p class="desc"></p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>.attr</em>의 속성 값을 가져옵니다.</a>
        <a href="#" class="btn2">클릭하면 <em>.prop</em>의 속성 값을 가져옵니다.</a>
        <a href="#" class="btn3">클릭하면 <em>.is</em>의 속성 값을 가져옵니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 p").text("");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $( ".list1 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".attr( \"checked\" ) : " + $input.attr("checked"))
            }).change();
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $( ".list1 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".prop( \"checked\" ) : " + $input.prop("checked"))
            }).change();
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $( ".list1 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".is( \"checked\" ) : " + $input.is(":checked"))
            }).change();
        });   
</script>
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼