Javascript classList

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My JavaScript</title>
  <style>
    .pink-bg{
      background: pink;
    }

    .red-border{
      border: 2px solid red;
    }

    .green-color{
      color: green;
    }
  </style>
</head>
<body>
  <p>Hello</p>
  <button>OK</button>
  
  <script src="main.js"></script>
</body>
</html>

main.js

'use strict'

{
    document.querySelector('button').addEventListener('click', ()=> {
        //console.log('Clicked');
        document.querySelector('p').classList.add('pink-bg', 'red-border');
        document.querySelector('p').classList.add('green-color');
    });

    //console.log('Hello');
}

投稿者: chosuke

趣味はゲームやアニメや漫画などです

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です