[JQuery] 속성 추가, 제거(attr, removeAttr)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

attr() - 속성을 가져오거나 추가

---

attr()은 선택된 요소의 속성의 값을 가져오거나 속성을 추가하는 데 사용되며, 아래와 같은 형태로 사용할 수 있습니다.

 

 

 

 

1. 속성 값 가져오기

$(선택자).attr( 선택요소 );

 

아래의 실제 코드를 통하여, 자세한 사용 예시를 알아볼 수 있습니다.

<div class="ibox-title">
    <h5>기본정보</h5>
    <div class="ibox-tools">
    	<div id="test1" class="detail123"></div>
    </div>
</div>


<script>
$(document).ready(function(){
    $("#test1").click(function(){
        alert("Click : " + $("#test1").attr("class"));
    });
});
</script>

test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값인 detail123을 가져와 alert형식으로 알려주게 됩니다.

 

 

 

 

 

2. 속성 값 변경하기

$(선택자).attr( 선택요소, 변경할 값 );

 

아래의 코드는 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값을 detail123에서 detail456으로 변경합니다.

<div class="ibox-title">
    <h5>기본정보</h5>
    <div class="ibox-tools">
    	<div id="test1" class="detail123"></div>
    </div>
</div>


<script>
$(document).ready(function(){
    $("#test1").click(function(){
    	$("#test1").attr('class','detail456');        
        alert("Click : " + $("#test1").attr("class"));
    });
});
</script>

 

 

 

 

 

 

 

removeAttr() - 속성 제거

---

1. 속성 값 제거하기

removeAttr()는 선택된 요소의 속성을 제거하는 데 사용됩니다.

 

$(선택자).removeAttr(선택요소);​

 

 

아래의 코드는 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값을 제거합니다.

<div class="ibox-title">
    <h5>기본정보</h5>
    <div class="ibox-tools">
    	<div id="test1" class="detail123"></div>
    </div>
</div>


<script>
$(document).ready(function(){
    $("#test1").click(function(){
    	$("#test1").removeAttr('class');        
        alert("Click : " + $("#test1").attr("class"));
    });
});
</script>