출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

jQuery는 CSS 요소를 쉽게 조작할 수 있다.

jQuery는 CSS 조작을 위한 여러 메소드들을 제공하고 있다. 


addClass() : 선택된 요소를 위한 하나 또는 그 이상의 클래스를 더한다.

removeClass() : 선택된 클래스로부터 하나 또는 그 이상을 제거한다. 

toggleClass() : Toggle 선택된 클래스로부터 더거나 지운다.

css() : 스타일 속성을 set 또는 리턴한다. 


1. addClass( )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
    });
});
</script>
<style>
.important {
    font-weight: bold;
    font-size: xx-large;
}
.blue {
    color: blue;
}
</style>
</head>
<body>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
 
<p>ppp1</p>
<p>ppp2</p>
 
<div>This is some important text!</div><br>
 
<button>Add classes to elements</button>
 
</body>
</html>
cs



2. removeClass( )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").removeClass("blue");
    });
});
</script>
<style>
.important {
    font-weight: bold;
    font-size: xx-large;
}
.blue {
    color: blue;
}
</style>
</head>
<body>
 
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
 
<p class="blue">ppp1</p>
<p>ppp2</p>
 
<button>Remove class from elements</button>
 
</body>
</html>
 
cs


3. toggleClass()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").toggleClass("blue");
    });
});
</script>
<style>
.blue {
    color: blue;
}
</style>
</head>
<body>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
 
<p>ppp1</p>
<p>ppp2</p>
 
<button>Toggle class</button>
 
</body>
</html>
cs

결과 : 버튼을 누르면 파란색 CSS 효과가 add, remove 됨

저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Dimensions 면적, 치수  (0) 2017.08.20
jQuery css() 메소드  (0) 2017.08.19
jQuery Remove 요소  (0) 2017.08.14
jQuery - Add Elements  (0) 2017.08.13
jQuery - Set Content and Attributes  (0) 2017.08.12

+ Recent posts

티스토리툴바