개발자의 길/jQuery

jQuery CSS 변경

모쿠 2017. 4. 10. 16:48

<jQuery의 CSS 변경 방법>


<06_css.html>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
 
<h1>jQuery CSS 변경 방법</h1>
<p style="background-color: lightyellow">jQuery CSS</p>
 
<!-- jQuery CDN 포함: 라이브러리 포함 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
    // jQuery를 사용한 CSS 변경
    // css('property', value)l
    // css({prop1: val1, prop2: val2, ...});
    $('p').click(function() {
        $(this).css({
            font: '200% serif',
            backgroundColor: 'lightgreen',
            border: '1px solid grey',
            textAlign: 'center'
        });
    });
});
</script>
 
</body>
</html>
cs



<07_css2.html>


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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
.important{
    font-weight: bold;
    font-size: 200%;
    border: 2px solid red;
}
.blue {
    color: blue;
}
table, th, td {
}
body p{
}
</style>
</head>
<body>
 
<h1>Add/Remove CSS class</h1>
<p id="p1">단락1</p>
<p id="p2">단락2</p>
<p id="p3">단락3</p>
<button type="button" id="add-class">Add Class</button>
<button type="button" id="remove-class">Remove Class</button>
<button type="button" id="toggle-class">Toggle Class</button>
 
<!-- jQuery CDN 포함: 라이브러리 포함 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
 
<script>
$(document).ready(function() {
    // addClass('클래스이름'): HTML 요소에 클래스 속성을 추가
    // removeClass('클래스이름'): HTMl 요소에서 클래스 속성을 제거
    // toggleClass('클래스이름'): 클래스 속성 추가/제거 토글
    
    $('#add-class').click(function() {
        $('#p1').addClass('important');
        $('#p2, #p3').addClass('blue');
    });
    
    $('#remove-class').click(function() {
        $('#p2, #p3').removeClass('blue');
    });
    
    $('#toggle-class').click(function() {
        $('#p2, #p3').toggleClass('blue');
    });
});
</script>
 
 
</body>
</html>
cs



<출력화면>







저작자표시 비영리