클래스 추가하기 : $("").addClass("classid")
클래스 제거하기 : $("").removeClass("classid")
클래스 존재유무 체크 : $("").hasClass("classid")
샘플소스를 기재하여 만들어 보겠습니다.
스크립트 소스 / jsp소스를 기재하도록 하겠습니다.
스크립트소스
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//id="aaa" 클릭
$("#aaa").click(function(){
//
$("#aaa").addClass("focusRed");
});
//button클릭시
$("#btn").click(function(){
if(!$("#fontLabel").hasClass("plusfontsize")){
$("#fontLabel").addClass("plusfontsize");
}else{
$("#fontLabel").removeClass("plusfontsize");
}
});
});
</script>
<style type="text/css">
.focusRed{
color: red;
}
.plusfontsize{
font-size:20pt;
}
</style>
jsp소스
<body>
<a href="#" id="aaa">빨강색!!!!!!!</a><br/>
<input type="button" id="btn" value="클래스적용버튼" /><br/>
<label id="fontLabel">글자크기가 변경됩니다</label>
</body>
<a href> 태그를 클릭하였을때 style의 id가 focusRed안에 내용을 확인해 색상을 red로 변경합니다.
버튼을 클릭하였을때 클래서 존재유무를 통해 클래스가 존재하지 않으면 글자사이즈를 style id plusfontsize안에
내용처럼 사이즈가 변경되고 클래스가 존재하게되면 원상태로!
실행화면을 확인했을때 왼쪽은 클릭전 상태이고 오른쪽은 클릭후의 상태입니다.
감사합니다
'JAVA개발' 카테고리의 다른 글
| [JAVA 개발] jquery(제이쿼리) keyup / text / html 이용한 회원가입 비밀번호 확인 체크폼 (0) | 2015.07.17 |
|---|---|
| [JAVA 개발] jquery(제이쿼리) chang / prop 이용한 회원가입 이메일작성 폼 만들기 (0) | 2015.07.16 |
| [JAVA 개발] jquery(제이쿼리) focus를 이용한 회원가입 폼 (0) | 2015.07.15 |
| [JAVA 개발] jquery(제이쿼리) 더블클릭이벤트 (0) | 2015.07.15 |
| [JAVA 개발] JSTL 문자열을 DATE형식으로 파싱(fmt:parseDate) (0) | 2015.07.14 |
