• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Style</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        .lined {
10
            text-decoration: line-through;
11
            color: lightgray;
12
        }
13
    </style>
14
    <script>
15
        $(function() {
16
            $("#addBtn").on("click", function() {
17
                // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함.
18
                $("#first, #third").addClass("lined");
19
            });
20
            $("#removeBtn").on("click", function() {
21
                // id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함.
22
                $("#first, #third").removeClass("lined");
23
            });
24
        });
25
    </script>
26
</head>
27
​
28
<body>
29
​
30
    <h1>클래스의 추가 및 제거</h1>
31
    <p id="first">이 단락에 클래스를 추가해 보아요!</p>
32
    <p>이 단락에는 클래스를 추가하지 않아요!</p>
33
    <p id="third">이 단락에 클래스를 추가해 보아요!</p>
34
    <button id="addBtn">클래스 추가</button>
35
    <button id="removeBtn">클래스 제거</button>
36
37
</body>
38
​
39
</html>