LANG SELRCT

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

2018年1月3日水曜日

JavaScriptでdisplayの値を変える(element.style.display)


こういう機能を作る

ボタンをクリックすると 対象の要素 の表示状態(style.display)が変わる


対象の要素




コード.gs
function 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)