-
jQuery - .css()jQuery 2020. 6. 23. 15:39
.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)의 속성(attibute)의 값을 가져오거나 속성을 추가할 때는 .attr()을 사용한다.
'jQuery' 카테고리의 다른 글
jQuery - .detach() (0) 2020.06.23 jQuery - .delay() (0) 2020.06.23 jQuery - .clone() (0) 2020.06.23 jQuery - .click() (0) 2020.06.23 jQuery - .children() (0) 2020.06.23