.css()

jQuery Reference

.css()는 첫 요소의 계산된 CSS 스타일을 읽거나, 선택한 모든 요소에 인라인 스타일을 설정합니다. 읽기 값은 스타일시트에 적은 원래 문자열과 다를 수 있습니다.

문법과 적용 범위

const color = $("#box").css("color");
const styles = $("#box").css(["color", "width"]);
$("#box").css({ color: "#a00000", padding: "12px" });

CSS(Cascading Style Sheets)는 웹페이지의 모양과 배치를 정하는 언어입니다. .css("color")는 외부 스타일과 상속 등을 적용한 계산값을 읽으며, 색이 rgb(...)로 반환되거나 % 너비가 px로 반환될 수 있습니다. 여러 속성 이름의 배열을 주면 속성·값 객체를 얻습니다. 설정은 객체 형태 또는 이름·값 형태를 사용하며 반환값은 jQuery 객체입니다.

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

전체 실행 예제

아래 코드를 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 css 예제</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>
<p id="box" style="color: #0000ff;">스타일을 바꿀 문단</p>
<button id="change" type="button">스타일 변경</button>
<button id="reset" type="button">변경 해제</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#change").on("click", function () {
        $("#box").css({ color: "#a00000", padding: "12px", border: "2px solid #835b00" });
        $("#output").text("padding-top: " + $("#box").css("padding-top"));
      });
      $("#reset").on("click", function () {
        $("#box").css({ color: "", padding: "", border: "" });
        $("#output").text("인라인 변경 해제");
      });
    });
  </script>
</body>
</html>

실행 결과 확인

스타일 변경을 누르면 붉은 글자와 여백·테두리가 생기고 padding-top: 12px가 표시됩니다. 변경 해제는 해당 인라인 속성을 제거하므로 기본 CSS와 상속이 다시 적용됩니다. 처음 적었던 파란 인라인 색을 별도로 저장한 것은 아니므로 그 값까지 복원하는 동작은 아닙니다.

사용할 때 주의할 점

길이 값은 "12px", "1.2em"처럼 단위를 명시하면 의도가 분명합니다. jQuery 4.0부터 숫자에 px를 자동으로 붙이는 속성이 제한됐으므로 모든 CSS 속성이 같은 방식으로 처리된다고 가정하지 마세요.
margin이나 border 같은 축약 속성보다 margin-top, border-top-width 같은 개별 속성으로 읽는 편이 명확합니다.
CSS 사용자 정의 속성은 .css("--accent", "#a00000")처럼 원래 이름 그대로 씁니다. 일반 속성의 camelCase 변환 규칙을 적용하지 않습니다.
반복되는 화면 상태는 .addClass()와 .removeClass()로 관리하면 CSS를 한곳에서 유지할 수 있습니다. HTML 속성의 값은 .attr()로 읽습니다.

용도를 비교하려면 .width()로 내용 너비 측정하기, .addClass()로 스타일 상태 관리하기, .attr()와 CSS 속성의 차이을 참고하세요.

jQuery Reference