📝 jQuery
🖥️ 1. 요소의 CSS 속성 제어
1-1. 속성값 읽기
HTML 태그 요소에 적용된 특성 속성값을 얻기 위해서는
CSS() 함수를 사용한다.$("요소").css("속성이름", "값");
1-2. 속성값 변경/추가
HTML 태그 요소에 특정 CSS값을 지정할 경우, attr() 함수와 용법이 동일하다.
let 변수 = $("요소").css("css 속성 이름"); $("요소").css({ "속성":"값", "속성":"값", "속성":"값" });
1-3. CSS 클래스의 적용 여부 알기
HTML 태그 요소의 특정 클래스 적용 여부는 hasClass()메서드의 리턴값(boolean)으로 파악할 수 있다.
let 변수 = $("요소").hasClass("클래스이름");
1-4. 클래스의 적용과 해제
📌 적용하기
- 요소에 특정 CSS클래스를 적용할 경우,
addClass() 함수를 사용
두 개 이상의 클래스를 한 번에 적용할 경우 공백으로 구분하여 지정
$("요소").addClass("클래스이름");
📌 제거하기
- HTML 태그 요소에저용된 특정 CSS 클래스를 제거할 경우
removeClass() 함수를 사용한다.
두 개 이상의 클래스를 한 번에 적용할 경우 공백으로 구분하여 지정
$("요소").removeClass("클래스이름");
1-5. 적용과 해제의 반복처리
- 어떤 요소에 특정 클래스의 적용과 해제를 반복적으로 처리하는 것을
토글처리라고 한다.
토글처리를 위해서는, 해당 클래스가 적용되어 있는지를 검사하여 적용되어 있다면 removeClass(), 적용되어 있지 않다면 addClass() 함수를 호출해야 한다.
if( $("요소").hasClass("클래스이름") ){ $("요소").removeClass("클래스이름"); } else { $("요소").addClass("클래스이름"); } -> 구문축약 $("요소").toggleClass("클래스이름");
📝 예제
EX)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.7.0/jquery.min.js"></script>
<style>
.box1 {
margin: 10px auto; border: 5px solid #ccc;
padding: 30px; text-align: center;
}
.box2 {
margin: 10px auto; border: 10px solid #ff00ff;
background-color: #ff0; padding: 25px; text-align: left;
}
</style>
</head>
<body>
<div id="box" class="box1"><h1>테스트 영역입니다.</h1></div>
<input type="button" id="btn1" value="red" />
<input type="button" id="btn10" value="클래스적용" />
<script>
// btn1 클릭 시 color를 tomato 색상으로 변경
$("#btn1").click(function(){
$("#box").css({ "color":"tomato" });
});
// btn10 클릭 시 class box1, box2가 적용되어있으면 해제,
// 그렇지 않으면 적용
$("#btn10").click(function(){
$("#box").toggleClass("box1 box2");
});
</script>
</body>