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