css 메서드
css 메서드는 요소의 CSS 스타일을 가져오고
변경할 수 있게 합니다.
중요한 점은 우리가 CSS 스타일에 지정된 값과 다를 수 있는
'계산된 스타일 속성(computed style
properties)' 값을 얻게 된다는 것입니다.
문법
하나의 속성 가져오기:
$(선택자).css(속성);
여러 속성 가져오기, 전달되는 매개변수 - 속성 이름들의 배열:
$(선택자).css(['width', 'height', 'color']);
하나의 속성 변경하기:
$(선택자).css(속성, 새로운 값);
여러 속성을 변경하기, '키: 값' 쌍을 포함하는 객체 형태로 전달합니다.
속성 이름은 CamelCase 형태로 지정합니다:
$(선택자).css({fontSize: '12px', color: 'red'});
또는, 대안적인 방법:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
또한 주어진 함수를 세트의 각 요소에 적용할 수 있습니다.
이때 함수의 첫 번째 매개변수는 세트 내 요소의 인덱스를 받고,
두 번째 매개변수는 특정 요소에 대한 지정된 css 속성의 현재 값을 받습니다.
함수 내부의 this는 현재 요소를 가리킵니다.
각 요소의 CSS 속성은 해당 요소에 대해 함수가 반환한 값으로 변경됩니다:
$(선택자).css(속성 이름, function(세트 내 인덱스, css 속성의 현재 값));
예시
www 클래스를 가진 모든 요소를 가져와
색상을 빨간색으로 변경해 봅시다:
<p class="www">text</p>
$('.www').css('color', 'red');
예시
www 클래스를 가진 모든 요소를 가져와
색상을 빨간색으로, 글꼴 크기를
20px로 변경해 봅시다:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
또는, 대안적인 방법:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
