CSS 속성을 추가하는 방법 - .css()

.css()

.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다.

 

기본형 1

.css( propertyName )

속성값을 가져옵니다. 예를 들어

$( "h1" ).css( "color" );

는 <h1> 요소의 스타일 중 color 속성의 값을 가져옵니다.

 

기본형 2

.css( propertyName, value )

style 속성을 추가합니다. 예를 들어

$( "h1" ).css( "color", "green" );

는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 바꿉니다.

<h1 style="color: green;">...</h1>

 

예제 1

<h1> 요소의 color 속성의 값을 출력합니다.

<h1>Lorem ipsum dolor.</h1>
<p></p>

h1 {
  color: red;
}

$(document).ready(function() {
  var color = $( "h1" ).css( "color" );
  $( "p" ).html( "Color is " + color );
});

 

예제 2

<h1> 요소의 글자색을 녹색으로 만듭니다.

<h1>Lorem ipsum dolor.</h1>

h1 {
  color: red;
}

$( document ).ready( function() {
  $( "h1" ).css( "color", "green" );
});

같이 보면 좋은 글

• HTML 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가할 때는 .attr()을 사용합니다.