본문 바로가기
jQuery/jQuery HTML

jQuery CSS Classes

by 진격의 파파 2013. 5. 23.
반응형

이번 장에서는 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:24pt;
}
.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:24pt; 두개의 스타일이 적용됩니다. 글씨는 굵게하고 글자크기는 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 구문에 대해서 알아보겠습니다.

반응형

'jQuery > jQuery HTML ' 카테고리의 다른 글

jQuery - Dimensions(면적,넓이)  (0) 2013.05.24
jQuery classes css()  (0) 2013.05.23
jQuery - Remove Elements  (0) 2013.05.22
jQuery Add Elements  (0) 2013.05.21
jQuery html Set text(), html(), val(), attr()  (0) 2013.05.20