CSS
jQuery에서 . css() 메서드는 선택한 요소의 CSS 속성을 가져오거나 설정하는 데 사용됩니다. 이 메서드를 사용하면 JavaScript 코드에서 CSS를 동적으로 조작할 수 있습니다.
.css() 메서드는 다음과 같은 두 가지 방법으로 사용할 수 있습니다:
- CSS 속성 가져오기: 선택한 요소의 CSS 속성 값을 가져옵니다.
- CSS 속성 설정: 선택한 요소의 CSS 속성 값을 설정합니다.
다음은 각각의 방법에 대한 설명입니다.
CSS 속성 가져오기
.css() 메서드를 사용하여 선택한 요소의 특정 CSS 속성 값을 가져올 수 있습니다. 이때 메서드에 가져오려는 CSS 속성 이름을 전달합니다.
// 예: 'color' CSS 속성 값을 가져오기
var color = $("p").css("color");
console.log(color); // 출력: 현재 'p' 요소의 색상 값 (예: "rgb(0, 0, 255)")
CSS 속성 설정
.css() 메서드를 사용하여 선택한 요소의 특정 CSS 속성 값을 설정할 수도 있습니다. 이때 메서드에 설정하려는 CSS 속성 이름과 값을 전달합니다.
// 예: 'color' CSS 속성 값을 설정하기
$("p").css("color", "red"); // 'p' 요소의 색상을 빨간색으로 설정
기본예제
이 코드는 버튼을 클릭할 때마다. my-div 클래스를 가진 요소의 배경색을 순환하면서 변경하는 예제입니다. jQuery의. css() 메서드를 사용하여 배경색을 변경하고 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 스타일 시트 */
.my-div{
width:100px;
height:100px;
background-color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// JavaScript 코드
var colorList=['red','green','blue']; // 변경할 색상 목록 정의
var i=0;
function myFunc(){
i++;
if(i>=colorList.length){
i=0;
}
// 선택한 요소의 배경색을 변경할 색상으로 설정
$(".my-div").css("backgroundColor",colorList[i]);
}
</script>
</head>
<body>
<!-- 변경될 요소 -->
<div class="my-div">
</div>
<!-- 버튼 클릭 시 myFunc 함수 호출 -->
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery CSS by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 버튼을 클릭하면 jQuery를 사용하여 #my-div 요소의 너비와 높이를 100px씩 증가시키고 배경색을 녹색으로 변경합니다. jQuery를 사용하여 스타일을 변경하는 방법과 JavaScript를 사용하여 스타일을 변경하는 방법이 주석 처리되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 스타일 시트 */
#my-div{
width:100px;
height:100px;
background-color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// JavaScript 코드
function myFunc(){
// jQuery를 사용하여 요소의 스타일 변경
$("#my-div").css({
"width":"+=100", // 너비를 100px 증가
"height":"+=100", // 높이를 100px 증가
"backgroundColor":"green" // 배경색을 녹색으로 변경
});
// 아래는 주석 처리된 JavaScript 코드입니다.
// 해당 코드는 위와 동일한 기능을 수행합니다.
// 주석을 해제하면 JavaScript를 사용하여 스타일을 변경할 수 있습니다.
/*
document.getElementById("my-div").style.width='';
document.getElementById("my-div").style.height='';
document.getElementById("my-div").style.backgroundColor='';
*/
//체이닝-chaining
//함수 연속실행
}
</script>
</head>
<body>
<!-- 변경될 요소 -->
<div id="my-div">
</div>
<!-- 버튼 클릭 시 myFunc 함수 호출 -->
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery CSS2 by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
jQuery에서 css에 변화를 주는 방법을 알아봤습니다. 해당 내용들은 JavaScript를 통해 만들 수 있으나 좀 더 편하게 구현할 수 있다는 장점이 있습니다. 하지만 단점도 존재하는데요 API가 발전하면서 jQuery성능의 이점이 줄고, 라이브러리 자체가 크다 보니 브라우저 로딩에 부담을 줄 수도 있습니다. jquery와 javascript 두 가지를 적절히 사용하는 것이 좋다고 할 수 있습니다. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
|---|---|
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |
| [Java Script] jQuery / children, parent (0) | 2024.04.26 |
| [Java Script] jQuery / ready (0) | 2024.04.24 |