LANG SELRCT

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

2018年1月3日水曜日

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


こういう機能を作る

ボタンをクリックすると 対象の要素 の表示状態(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にする