jQuery 입문 | CSS 스타일 및 프로퍼티 설정 | CSS 스타일 설정 .css()

CSS 스타일 설정

jQuery를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다.

.css() 메소드

jQuery에서는 .css() 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다.
.css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다.

스타일 설정

$("p").css("backgroundColor", "#00ff00")

위의 예제에서 .css() 메소드는 모든 <p>요소의 배경색을 #00ff00로 설정한다.

코드 실행

스타일 반환

$("p").css("backgroundColor")

위의 예제에서 .css() 메소드는 첫 번째 <p>요소의 배경색을 반환한다.

코드 실행

여러 스타일 한번에 설정

.css() 메소드를 사용하면 선택한 요소의 스타일에 관한 여러 속성값을 한 번에 설정할 수도 있다.

$("p").css({
  "fontSize": "30px",
  "backgroundColor": "yellow"
});

모든 <p>요소의 글씨 크기를 30px으로 설정하고, 배경색을 노란색으로 설정한다.

코드 실행

속성명 설정 방식

JavaScript에서는 하이픈(-)으로 연결된 CSS 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 한다.

하지만, jQuery의 .css() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘다 사용할 수 있다.

  $("p").css({
    "fontSize": "30px",
    "color": "#ffffff",
    "background-color": "green"
  });

fontSize는 JavaScript와 jQuery 둘 다 사용할 수 있으나, background-color는 jQuery에서만 사용할 수 있다.

코드 실행