jQuery - CSS 조작 메소드

.css() 메소드는 선택한 요소에 하나 이상의 CSS 스타일 속성을 얻거나 설정할 수 있습니다. css() 는 다음 방법 중 하나를 사용합니다.

// 하나의 속성 값을 설정
$(선택 요소).css("background", "red");

// 속성을 한꺼번에 설정
$(선택 요소).css({
  "background":"#CCC",
  "color":"red",
  "font-size":"150%",
  ...
});

// 선택한 요소의 속성을 얻기
$(선택 요소).css("background");

다음은 <h1> 요소의 색상을 빨간색으로 지정합니다. 스타일은 기본 노랑색이지만 제이쿼리로 CSS 를 조작해서 강제적으로 빨간색으로 변경합니다.

<style>
h1 {
  color: yellow;
}
</style>

<script>
$(function(){
  $("h1").css("color", "red");
});
</script>

<h1>안녕 하보니</h1>

아래는 <h1> 에 설정된 CSS 의 속성 값을 얻어 옵니다. CSS 에는 'yellow'  로 정의하였지만 .text() 메소드로 얻어올 때는 RGB() 로 반환합니다.

<style>
h1 {
  color: yellow;
}
</style>

<script>
$(function(){
  var color = $("h1").css("color");

  $("#put").text(color);
  /* 결과: rgb(255, 255, 0) */
});
</script>

<h1>안녕 하보니</h1>

<div id="put"></div>

다음은 여러 속성 값을 한번에 지정한 예제입니다.

<script>
$(function(){
  $("div#use").css({
    'border': '1px solid',
    'width': '300px',
    'height': '400px',
    'font-size': '40px'
  });
});
</script>

<div id="use">안녕 하보니</div>