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

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

.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()을 사용합니다.

You may like these posts

  • 순서대로 요소를 나타내는 방법 .animate()를 이용하여 서서히 나타나게 만든 예제입니다. <button>Click to animate</button> <div class="box box-1">Hello!<…
  • HTML 태그 바꾸는 방법 예를 들어 <h2>를 <p>로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); <h2> 요소를 선택하고 내용으로 들어간 후 &l…
  • .length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다.   예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <button>Cli…
  • CDN 이용하기 HTML에 다음 코드를 추가합니다. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>   다운로드 받아 연결하기 jQuery 다운로드는…
  • scrollTop() 맨 위로 스크롤 이동하는 방법 jQuery의 scrollTop()을 이용하면 맨 위로 부드럽게 올라가는 효과를 쉽게 만들 수 있습니다. 밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고,그 링크를 클릭하면 맨 위로 천천히 올라갑니다. …
  • 체크박스 모두 선택, 모두 선택 해제 하는 방법 다음은 체크박스를 모두 선택하고 해제하는 간단한 예제입니다. <p><input type="checkbox" name="all" class="check-all"> <label>Chec…

Post a Comment