.attr()

jQuery Reference

.attr()는 HTML 속성을 읽거나 설정합니다. 인수가 속성 이름 하나면 첫 요소의 값을 읽고, 이름과 값을 함께 주면 선택한 모든 요소에 그 속성을 설정합니다.

문법과 적용 범위

const title = $("#link").attr("title");
$("#link").attr("title", "이동 안내");
$("#link").attr({ title: "이동 안내", "data-role": "help" });

속성이 없거나 선택 집합이 비어 있으면 읽기 결과는 undefined입니다. 읽는 값은 보통 문자열이며 여러 요소의 값을 한꺼번에 반환하지 않습니다. 객체 형태로 여러 속성을 설정할 수 있고, 함수 형태에서는 각 요소의 인덱스와 이전 속성값을 받아 새 값을 계산할 수 있습니다. 반환값은 읽기에서는 속성값, 설정에서는 jQuery 객체입니다.

jQuery 공식 문서의 .attr() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery attr 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">이름</label>
<input id="name" type="text" value="초기 이름" title="수정 전">
<input id="check" type="checkbox" checked="">
<label for="check">동의</label>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const before = $("#name").attr("title");
      $("#name").attr({ title: "이름 입력", placeholder: "예: 홍길동" });
      $("#check").prop("checked", false);
      $("#output").text("title: " + before + " → " + $("#name").attr("title") +
        " / checked 속성: " + JSON.stringify($("#check").attr("checked")) +
        " / 현재 상태: " + $("#check").prop("checked"));
    });
  </script>
</body>
</html>

실행 결과 확인

title은 수정 전에서 이름 입력으로 바뀌고 체크박스는 해제됩니다. jQuery 4.0.0에서 checked=""를 읽은 값은 빈 문자열이며, 현재 checked 프로퍼티는 false입니다. 이름 칸의 초기 값은 그대로 있어 placeholder는 입력값을 지워야 보입니다.

사용할 때 주의할 점

HTML 속성과 현재 DOM 프로퍼티는 구분해야 합니다. 체크 여부는 .prop("checked"), 사용자가 입력한 값은 .val()로 읽으세요. .attr("value")는 현재 입력값을 읽는 일반적인 방법이 아닙니다.
jQuery 4.0에서 .attr(이름, false)는 ARIA가 아닌 속성을 제거합니다. aria-expanded 같은 ARIA 속성의 false는 "false"로 남으므로, 속성 자체를 없애려면 .removeAttr() 또는 null을 사용하세요.
속성 이름이 같아 보여도 CSS 속성은 .css()로 다룹니다. class 전체를 .attr()로 교체하면 기존 클래스가 덮어써지므로 일부 이름만 바꿀 때는 클래스 메서드가 적합합니다.

용도를 비교하려면 .removeAttr()로 속성 삭제하기, .val()로 현재 입력값 읽기, .css()로 스타일 읽고 설정하기을 참고하세요.

jQuery Reference