jQuery에서 css() 메서드는 선택 요소의 css 속성 값을 가져오거나 변경합니다.
다음은 css() 메서드의 사용 구문입니다.
.css(propName) .css(propName, value)
다음의 코드 예시를 통해 메서드의 주요 사용 방법을 알아보겠습니다.
<!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() { let prev_color = $("h1").css("color"); // Get css value $("h1").css("color", "blue"); // Change css value }); </script> </head> <body> <h1>Title of Page</h1> <p id="color_text"></p> </body> </html>
12행 : css() 메서드를 통해 가져온 h1 태그의 "color" 속성 값을 prev_color 변수에 저장합니다.
13행 : css() 메서드를 통해 기존 h1 태그의 "color" 속성 값을 변경합니다.
css() 메서드가 선택할 수 있는 요소가 여러 개라면, 웹페이지에서 가장 먼저 찾은 요소에 동작하게 됩니다.
css() 메서드 다수의 속성 값을 선택하거나 변경할 수도 있습니다. 이 때는 속성들로 구성된 배열이 속성:속성 값의 딕셔너리를 인자로 받을 수 있습니다. 전자의 경우 속성:속성 값의 딕셔너리를 반환하고, 후자의 경우는 딕셔너리로 받은 속성들을 속성 값으로 변경합니다.
// Get the css values for each element from given array, in a form of dictionary var dictionary_ex = $("#id_ex").css([ "width", "height", "color", "background-color" ]); // Change the css values for each key-value from given dictionary $( this ).css({ "background-color": "yellow", "color": "Crimson" });
728x90
반응형
'Frontend > JQuery' 카테고리의 다른 글
| [jQuery] remove(), empty() 메서드 (0) | 2023.09.22 |
|---|---|
| [jQuery] prop() 메서드 vs attr() 메서드 (0) | 2023.09.21 |
| [jQuery] html(), text() 메서드 (0) | 2023.09.20 |
| [jQuery] addClass(), removeClass() 메서드 (0) | 2023.09.12 |
| jQuery에 대하여 (0) | 2023.09.11 |