[jquery] attr()을 활용하여 속성 변경하기

 

<input type="text id="member_id" placeholder="아이디를 입력하세요">

이런식으로 태그에 직접 속성을 지정해주면 간단하지만 간혹 직접 지정이 어려운 경우가 있다.

 

ex) 카페24에서는 자체 모듈(변수)로 회원가입 인풋항목을 생성하기 때문에 인풋 태그 안에 placeholder를 직접 지정해줄수가 없다.

또는 제이쿼리 스크립트에 따라 속성이 추가되거나 삭제되어야하는 경우 등

 

 

이런 경우 아래의 스크립트를 넣어 해결이 가능하다.

$( document ).ready( function() {
   $("input#member_id").attr("placeholder", "아이디를 입력하세요");
});

 

그러면 직접 placeholder="아이디를 입력하세요"를 넣지 않고도 동일한 결과를 얻을 수 있다.

 

 

---

attr()의 다양한 활용 방법

제이쿼리의 attr은 다양하게 활용이 가능하다.

 

이미지 url 변경

$( document ).ready( function() {
  $('#img').attr("src", "http://xxx.com/image/img.jpg");
});

위의 스크립트를 쓰면 이미지 태그의 src 부분을 변경 가능하다.

<img src="http://xxx.com/image/img.jpg"> 

 

 

이동 링크 수정

$( document ).ready( function() {
  $('#btn_more').attr("href", "http://xxx.com/");
});

위의 스크립트를 쓰면 하이퍼링크 태그의 href부분을 변경 가능하다

<a href="http://xxx.com">text</a>