• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript Node Handle</title>
7
    <style>
8
        .para {
9
            background-color : orange;
10
        }
11
    </style>
12
</head>
13
​
14
<body>
15
​
16
    <h1>속성 노드의 값 변경</h1>
17
    <p>속성 노드의 값을 변경하고 싶어요!</p>
18
    <button onclick="changeAttribute()">속성 변경!</button>
19
​
20
    <script>
21
        var para;
22
        function changeAttribute() {
23
            // 모든 <p> 요소중에서 첫 번째 요소에 클래스 속성값으로 "para"를 설정함.
24
            document.getElementsByTagName("p")[0].setAttribute("class", "para");
25
            // 클래스가 설정되면 해당 클래스에 설정되어 있던 스타일이 자동으로 적용됨.
26
        }
27
    </script>
28
29
</body>
30
​
31
</html>