jQuery 강좌 | Methods > .css()

.css()는 선택한 요소의 css 속성값을 가져오거나 속성값을 변경 또는 추가할 수 있게 해줍니다.

문법

속성값을 가져오는 문법은 다음과 같습니다.

.css( propertyName )

예를 들어 

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

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

속성값을 변경 또는 추가할 때는 다음과 같이 합니다.

.css( propertyName, value )

예를 들어 

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

는 h1 요소의 글자색을 녹색으로 바꿉니다. h1의 스타일에 color 속성값이 다른 색이어도 녹색으로 바꾸고, color 속성이 없어도 녹색으로 만듭니다.

예제 1

http://book.cmsfactory.net/jQuery/V01/Methods/css-01.html

h1 요소의 color 속성값을 가져와서 문단에 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .css()</title>
    <style>
      h1 {color: red;}
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        var color = $( "h1" ).css( "color" );
        $( "p" ).html( "Color is " + color );
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
    <p></p>
  </body>
</html>

예제 2

http://book.cmsfactory.net/jQuery/V01/Methods/css-02.html

h1 요소의 색이 빨간색으로 정의되어 있지만, 이를 녹색으로 바꾸는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .css()</title>
    <style>
      h1 {color: red;}
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function() {
        $( "h1" ).css( "color", "green" );
      });
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>
Category

Created on 2014-01-12 08:52 | Updated on 2015-07-17 01:06

이 글을 공유하기

Kakao