LANG SELRCT

コードを書く場所についてはこちら

2018年5月27日日曜日

classListでスタイルをadd, remove, toggle, containsする


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を返す