jQuery / Method / .css() – 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

.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 속성의 값을 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      h1 {color: red;}
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.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

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

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

참고

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

jQuery

CODING FACTORY