• 코드:
​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
    <script>
9
        $(function() {
10
            $("#setBtn").on("click", function() {
11
                $("#word").attr("title", "즐거운 제이쿼리 수업이에요~") // id가 "word"인 요소에 title 속성을 설정함.
12
                    .css("color", "red");                               // 해당 요소의 CSS 스타일을 설정함.
13
            });
14
            $("#removeBtn").on("click", function() {
15
                $("#word").removeAttr("title")      // 해당 요소에서 title 속성을 제거함.
16
                    .css("color", "black");
17
            });
18
        });
19
    </script>
20
</head>
21
​
22
<body>
23
​
24
    <h1>.attr() 메소드</h1>
25
    <p>이 <span id="word">단어</span>에 title 속성을 설정해 보아요!</p>
26
    <p>아래 버튼을 누른 후 단어 위로 마우스를 가져가 보세요!</p>
27
    <button id="setBtn">속성값 설정</button>
28
    <button id="removeBtn">속성 제거</button>
29
30
</body>
31
​
32
</html>