classListで要素のスタイルを操作してみる
デモ
(Apps ScriptのWebアプリで作ったもの)
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.bg_pink {
background-color: pink;
}
</style>
</head>
<body>
<textarea id="ta"></textarea><br>
<button id="add_bt">add</button>
<button id="remove_bt">remove</button>
<button id="toggle_bt">toggle</button>
<button id="contains_bt">contains</button>
<script>
document.getElementById("add_bt").onclick = add_bt_clicked;
document.getElementById("remove_bt").onclick = remove_bt_clicked;
document.getElementById("toggle_bt").onclick = toggle_bt_clicked;
document.getElementById("contains_bt").onclick = contains_bt_clicked;
var ta = document.getElementById("ta");
function add_bt_clicked(){
ta.classList.add("bg_pink");
}
function remove_bt_clicked(){
ta.classList.remove("bg_pink");
}
function toggle_bt_clicked(){
ta.classList.toggle("bg_pink");
}
function contains_bt_clicked(){
ta.value = ta.classList.contains("bg_pink");
}
</script>
</body>
</html>
|
意訳bg_pinkのスタイル 背景色をpinkにする テキストエリア addボタン removeボタン toggleボタン containsボタン addボタンをクリックしたらadd_bt_clickedを実行する removeボタンをクリックしたらremove_bt_clickedを実行する toggleボタンをクリックしたらtoggle_bt_clickedを実行する containsボタンをクリックしたらcontains_bt_clickedを実行する idがtaの要素を取得する この機能がやること idがtaのテキストエリアにbg_pinkのスタイルを追加する この機能がやること idがtaのテキストエリアからbg_pinkのスタイルを削除する この機能がやること idがtaのテキストエリアにbg_pinkのスタイルがなければaddしてあればremoveする この機能がやること idがtaのテキストエリアにbg_pinkのスタイルがあればtrueしてなければfalseを返す |
