Frontend/JQuery
[jQuery] css() 메서드
hyeok1235
2023. 9. 13. 16:51
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
반응형