2 분 소요

제이쿼리는 DOM 요소의 CSS 스타일, HTML 속성(attribute), DOM 프로퍼티(property)를 동적으로 설정하거나 가져올 때 매우 편리한 메소드를 제공합니다.

대표적인 메소드로는 다음과 같은 것들이 있습니다.

  • .css() – CSS 스타일 설정 및 반환
  • .attr() – HTML 속성(attribute) 설정 및 반환
  • .prop() – DOM 프로퍼티(property) 설정 및 반환
  • .removeAttr() / .removeProp() – 속성 및 프로퍼티 제거

📌 CSS 스타일 설정 (.css())

.css() 메소드는 요소의 CSS 스타일 속성을 읽거나 설정할 때 사용됩니다.

사용 예제:

$("button").on("click", function() {
    // 여러 스타일 한 번에 설정하기
    $("p").css({
        "font-size": "20px",
        "background-color": "yellow"
    });

    // 특정 스타일 값 가져오기
    const fontSize = $("p").css("font-size");
    $("#text").html(`글씨 크기: ${fontSize}`);
});
  • 하이픈(-) 포함된 스타일 이름은 camelCase(예: backgroundColor)나 원래 방식(background-color) 모두 사용 가능합니다.

📌 속성(attribute) 설정과 제거 (.attr() & .removeAttr())

속성(attribute)은 HTML 요소에 명시적으로 정의된 값입니다.

.attr() 메소드 예제:

$("button").on("click", function() {
    // 속성 추가 및 변경
    $("#word").attr("title", "즐거운 제이쿼리").css("color", "red");

    // 속성값 반환
    const title = $("#word").attr("title");
    $("#text").html(`title 속성값: ${title}`);
});

.removeAttr() 메소드 예제:

$("button").on("click", function() {
    // title 속성 제거
    $("#word").removeAttr("title").css("color", "black");
});

📌 프로퍼티(property) 설정과 제거 (.prop() & .removeProp())

프로퍼티(property)는 DOM 객체에서 동적으로 변경 가능한 값입니다.

.prop() 메소드 예제:

$("button").on("click", function() {
    // 체크박스 체크 설정
    $("input[type='checkbox']").prop("checked", true);

    // 프로퍼티 값 읽기
    const isChecked = $("input[type='checkbox']").prop("checked");
    $("#text").html(`체크박스 상태: ${isChecked}`);
});

.removeProp() 메소드 예제:

$("button").on("click", function() {
    // checked 프로퍼티 제거
    $("input[type='checkbox']").removeProp("checked");
});

📌 속성(attribute)과 프로퍼티(property)의 차이점

  • 속성(attribute): HTML 태그에서 고정적으로 정의된 값 (예: <input type="checkbox" checked="checked">)
  • 프로퍼티(property): DOM 객체에서 자바스크립트나 사용자 조작에 의해 동적으로 변경되는 값 (예: 체크박스가 체크된 상태면 checked 프로퍼티는 true, 아니면 false)

실제 차이 확인 예제:

$("#checkbox").change(function() {
    const attrChecked = $(this).attr("checked"); // 속성값(HTML 고정값)
    const propChecked = $(this).prop("checked"); // 프로퍼티값(실시간 상태)

    $("#text").html(`속성값: ${attrChecked}, 프로퍼티값: ${propChecked}`);
});
  • .attr("checked"): 고정된 속성값 반환 (“checked” 또는 undefined)
  • .prop("checked"): 현재 체크 상태 반환 (true 또는 false)

📌 CSS·속성·프로퍼티 메소드 한눈에 정리

  • .css() – 요소의 CSS 스타일 설정 및 반환
  • .attr() – HTML 속성(attribute) 설정 및 반환
  • .prop() – DOM 프로퍼티(property) 설정 및 반환
  • .removeAttr() – 요소의 HTML 속성 제거
  • .removeProp() – 요소의 DOM 프로퍼티 제거

📌 활용 예제: 스타일·속성·프로퍼티 동적 제어하기

$("button").on("click", function() {
    // 스타일 변경
    $("p").css({
        "font-size": "18px",
        "color": "blue"
    });

    // HTML 속성 추가
    $("p").attr("title", "동적 속성 추가").css("border", "1px solid red");

    // 프로퍼티 설정 (체크박스 상태 변경)
    $("#checkbox").prop("checked", true);

    // 결과 출력
    const isChecked = $("#checkbox").prop("checked");
    $("#text").html(`체크박스 상태: ${isChecked}`);
});

질문 정리

.attr()로 checkbox를 체크할 수 있나요?

가능하지만 권장하지 않습니다. 체크박스 상태 변경은 .prop("checked", true/false)를 쓰는 것이 가장 안전합니다.

속성과 프로퍼티 중 어떤 걸 써야 할까요?

동적으로 변경될 수 있는 요소 상태(예: 체크 여부)는 .prop()을, HTML의 고정된 값(예: href, src)은 .attr()을 사용하면 됩니다.

프로퍼티를 제거하면 원상태로 돌아가나요?

반드시 그런 것은 아닙니다. 프로퍼티는 동적 상태이기 때문에 프로퍼티 제거 후 다시 기본값으로 설정해줘야 하는 경우가 많습니다.

카테고리:

업데이트:

댓글남기기

참고