Javascriptでボタンクリック後、しばらくすると文字カラーが変わるコード。
classList.addでクラス付与。
See the Pen Untitled by eiichi (@Etaro) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="button">Click me</button>
<h1 class="title">Hello, world!</h1>
</body>
</html>.is-red {
color: red;
font-size: 24px;
font-family: 'Arial', sans-serif;
margin: 10px 0;
} <script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.button').addEventListener('click', function() {
setTimeout(function() {
document.querySelector('.title').classList.add('is-red');
}, 3000);
});
});
</script>setTimeoutで3秒後にカラーチェンジ。