DOM/attribute-methods.html at main · yamada814/DOM · GitHub

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 lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メソッドによる属性値の取得・更新・設定・削除</title>
    <style>
        .color-red{
            color:red;
        }
        .color-blue{
            color:blue;
        }
    </style>
</head>

<body>
    <h1>メソッドによる属性値の取得・更新・設定・削除のサンプル</h1>
    <p id="target" class="color-red">5秒後にこのp要素のclass属性の値が更新されます。
        <br />同じく5秒後にstyle属性が設定されます。
        <br />また、10秒後にclass属性は削除されます。
    </p>
    <script>
        const target = document.getElementById("target");
        setTimeout(() => {
            target.setAttribute("class","color-blue");
            target.setAttribute("style","font-weight:bold")
        }, 5000);
        setTimeout(() => {
            target.removeAttribute("class")
        }, 10_000);

    </script>
</body>

</html>