제이쿼리 속성값 가져오기, 제어 (attr() / HTML태그 속성 변경)

 

 

 

 

웹 개발을 할 때 제이쿼리의 attr()을 활용할 때가 많습니다. 

개인적으로 HTML 코드보다는 제이쿼리를 사용하여 동적으로 활용할 수 있도록 구성하는 게 나중에도 더 편하다고 생각하기 때문인 것 같습니다.

 

attr()을 활용하여 원하는 속성 값을 가져와서 그 내용을 다른 곳에 사용한다던지

어떤 이벤트가 발생했을 때(예를 들어 버튼을 클릭했다던지, 일정 시간지 지났다던지 등) 속성을 변경시킬 수 있습니다.

 

예시를 보며 알아보도록 하겠습니다. 

 

 

1. 속성 값 가져오기

 

<img id="testImg" src="/img/test/img01.png">

위와 같은 이미지 태그가 있다고 가정해보겠습니다.

 

이미지 태그의 id는 testImg이고 src에 적혀있는 경로에 있는 이미지를 화면에 표시합니다.

이때 저 태그의 이미지 경로를 알아내고 싶다면 

 

$("#testImg").attr("src");

attr안에 "src"를 작성하면 됩니다.

 

 

 

 

2. 속성 값 변경하기

 

다시 위 1번과 같은 이미지 태그가 있다고 가정해보겠습니다.

 

이런 상황에서 내가 만든 버튼을 클릭했을 때 다른 이미지를 화면에 보이게 하고 싶습니다. 

그렇다면 아래와 같이 attr()을 사용하여 변경할 수 있습니다.

 

$("#testImg").attr("src", "/img/test/img02.png");

먼저 변경하고자 하는 이미지 태그의 id를 적고 그 뒤에 attr(속성, 속성 값)을 작성합니다.

 

이 내용을 내가 만든 버튼을 클릭했을 때 실행되는 부분에 작성하면 됩니다.

예제를 확인해보시기 바랍니다.

 

스크립트

$(document).ready(function(){
    // 버튼 클릭 시 fncTestBtnEvent 함수 실행 
    $("#testBtn").click(fncTestBtnEvent);
});

function fncTestBtnEvent()
{
    $("#testImg").attr("src", "/img/test/img02.png");
}

 

HTML

<img id="testImg" src="/img/test/img01.png">
<button type="button" id="testBtn">이미지 변경 버튼</button>

 

 

테스트해보시고 각자 필요한 곳에 유용하게 사용하시기 바랍니다.