こういう機能を作る
ボタンをクリックすると 対象の要素 の表示状態(class名)が変わる
対象の要素
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <style> .display_block { display: block; } .display_inline { display: inline; } .display_none { display: none; } </style> <body> <div id="div1">対象の要素</div> <button id="bt_block">block 表示</button> <button id="bt_inline">inline 表示</button> <button id="bt_none">none 非表示</button> <script> document.getElementById("bt_block").onclick = bt_block_clicked; document.getElementById("bt_inline").onclick = bt_inline_clicked; document.getElementById("bt_none").onclick = bt_none_clicked; var div = document.getElementById("div1"); function bt_block_clicked() { div.className = "display_block"; } function bt_inline_clicked() { div.className = "display_inline"; } function bt_none_clicked() { div.className = "display_none"; } </script> </body> </html> |
意訳これはHTML5文書です 前後に改行をつけて表示 前後に改行なしで表示 非表示 divを置く ボタンを置く(id は bt_block) ボタンを置く(id は bt_inline) ボタンを置く(id は bt_none) idがbt_blockの要素をクリックしたらbt_block_clickedを実行する idがbt_inlineの要素をクリックしたらbt_inline_clickedを実行する idがbt_noneの要素をクリックしたらbt_none_clickedを実行する idがdiv1の要素を取得する この機能がやること idがdiv1のクラス名をdisplay_blockにする この機能がやること idがdiv1のクラス名をdisplay_inlineにする この機能がやること idがdiv1のクラス名をdisplay_noneにする |