JavaScriptによるスタイルシート切り替え例
this.classList.toggleにより、指定したクラスのon/offを切り替える。
this.classList.toggleにより、指定したクラスのon/offを切り替える。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="mystylesheet.css">
</head>
<body>
<div id="mark">クリックしてね</div>
<script src="script/myscript.js" charaset ="utf-8"></script>
</body>
</html>
/* mystylesheet.css */
.mark_yellow{
background-color: yellow;
color: #ca0000;
}
/* script/myscript.js */
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('mark').addEventListener('click', function(){
this.classList.toggle('mark_yellow');
});
});
タグ：CSS JavaScript
