이번 장에서는 jQuery CSS Classes에 대해서 알아보겠습니다.
JQuery와 CSS 조작을 위한 여러 가지 방법이 있습니다. 우리는 다음과 같은 방법을 살펴 보겠습니다 .
addClass() 선택한 요소에 하나 이상의 클래스를 추가합니다.
removeClass() 선택한 요소에서 하나 이상의 클래스를 제거합니다.
toggleClass() 선택된 요소에서 클래스를 추가/제거가 동시에 가능케 합니다.
addClass() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>첫번째 머리글</h1>
<h2>두번째 머리글</h2>
<p>첫번째 문장입니다.</p>
<p>두번째 문장입니다.</p>
<div>이곳은 important 문장입니다.!</div>
<br>
<button>Add classes</button>
</body>
</html>
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
// 위 구문을 보시면 "Add classes" 버튼을 클릭하면 h1,h2,p 클래스에 blue 클래스값을 대입합니다. 그래서 해당 html 요소엔 파란글씨로 나타납니다. 그리고 div 영역에 important 클래스를 대입하여 font-weight:bold; font-size:xx-large; 두개의 스타일이 적용됩니다. 글씨는 굵게하고 글자크기는 xx-large(투엑스라지) 만큼 커지게 됩니다.
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
// 위 구문은 important, blue 클래스가 동시에 div1 영역에 적용하는 방법입니다. 클래스를 하나이상 연속하여 적용할 수 있습니다.
removeClass() 관련예제
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
// removeClass()는 말그대로 클래스를 없애는 것을 말합니다. 위 구문을 보시면 h1,h2,p 에 대하여 적용된 클래스 blue 값을 없앱니다.
소스 적용은 addClass() 예제를 활용하여 직접 코딩해보시기 바랍니다. 그래야 확실하게 알수 있습니다.
toggleClass() 관련예제
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
// toggle의 역할에 대해선 앞장에서도 여러번 설명드린바 있습니다. toggleClass()은 add, remove를 동시에 수행합니다. 위 구문에서
$("h1,h2,p").toggleClass("blue"); 이 나오는데 버튼을 클릭하면 blue 클래스를 적용하고, 다시 버튼을 클릭하면 blue 클래스를 remove 합니다.
크게 어려운점은 없을것이라 생각됩니다. 다음장에서는 class()를 이어서 CSS classes 구문에 대해서 알아보겠습니다.
