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 class="green-color">Hello</p>
<button>OK</button>
<script src="main.js"></script>
</body>
</html>main.js
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
// console.log(document.querySelector('p').classList.contains('pink-bg')); // false
// if (document.querySelector('p').classList.contains('pink-bg') === false) {
// document.querySelector('p').classList.add('pink-bg');
// } else {
// document.querySelector('p').classList.remove('pink-bg');
// }
document.querySelector('p').classList.toggle('pink-bg');
});
}