[jQuery 10장]스크립트로 지정 태그에 클래스 적용하기

우리는 가끔 특정 이벤트를 주어 클래스를 지정 태그에 적용 시킬때가 존재한다.

a 태그 클릭시 포커스를 줄때 또는 버튼 클릭시 특정 태그에 클래스를 추가 또는 제거 하는 방식으로 예를 들어서 작성해보겠음.

클래스 관련 추가/삭제/존재여부에 대한 함수를 다뤄볼텐데

 

클래스 추가하기 : $("").addClass("classId")

클래스 제거하기 : $("").removeClass("classId")

클래스 존재유무 체크 : $("").hasClass("classId")

로직을 가상으로 만들어보고 소스를 제작해보도록 하겠다.

1. a태그 클릭시 클래스 아이디가 focusRed 라는 놈으로 글자색 변경하기

2. 버튼 클릭시 클래스 존재유무로 클래스 존재하지 않으면 특정 글자의 font size를 늘리는 plusfontsize 클래스 아이디 추가

                                               클래스 존재하면 특정 글자 원래대로 돌려주어야 하므로 plusfontsize 클래스 아이디 제거

이 두가지로 소스코드를 짜봅시다!

우선은 테스트용 css를 짜보도록 하자

<style type="text/css">
	.focusRed {
		color: red;
	}
	.plusfontsize{
		font-size: 20pt;
	}
</style>

html태그이다. body 태그내에 작성해주자

<a href="#" id="atag">빨~~~갛게</a><br/>
<input type="button" value="클래스적용토글" id="classChangeButton" /><br/>
<label id="fontLabel">글자11</label>

이제 마지막으로 스크립트 코드를 짜보자

$(function(){
        //a태그 클릭시
		$("#atag").click(function(){
            //a태그에 focusRed라는 클래스를 추가한다.
			$("#atag").addClass("focusRed");
		});
       //id가 classChangeButton이라는 버튼 클릭시
		$("#classChangeButton").click(function(){
			//라벨태그에 클래스가 존재하지 않는다면,
			if(!$("#fontLabel").hasClass("plusfontsize")) {
				//plusfontsize 클래스아이디를 fontLable 아이디를 가지고 있는 label에 클래스 추가
				$("#fontLabel").addClass("plusfontsize");
			//라벨태그에 클래스가 존재할경우
			} else {
				//plusfontsize 클래스 아이디를 fontLable 아이디를 가지고 있는 label 클래스 제거
				$("#fontLabel").removeClass("plusfontsize");
			}
		})
})

해당 소스를 페이지에 맞춰 읽어보면서 실행을 해보면 위에서 가상으로 짠 로직에 대한 결과가 나올것이다.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!