こういう機能を作る
ボタンをクリックすると 対象の要素 の表示状態(style.display)が変わる
対象の要素
コード.gsfunction doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<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.style.display = "block";
}
function bt_inline_clicked() {
div.style.display = "inline";
}
function bt_none_clicked() {
div.style.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の要素のstyleのdisplayをblockにする(前後に改行あり) この機能がやること idがdiv1の要素のstyleのdisplayをinlineにする（前後に改行なし） この機能がやること idがdiv1の要素のstyleのdisplayをnoneにする（非表示） |
関連記事
JavaScriptでdisplayの値を変える（element.className）
