LANG SELRCT

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

2018年1月3日水曜日

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


こういう機能を作る

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


対象の要素


コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <div id="div1">対象の要素</div>
  <button id="bt_visible">visible 見える</button>
  <button id="bt_hidden">hidden 見えない</button>
  <script>
    document.getElementById("bt_visible").onclick = bt_visible_clicked;
    document.getElementById("bt_hidden").onclick = bt_hidden_clicked;

    var div = document.getElementById("div1");

    function bt_visible_clicked() {
      div.style.visibility = "visible";
    }

    function bt_hidden_clicked() {
      div.style.visibility = "hidden";
    }
  </script>
</body>
</html>

意訳
これはHTML5文書です


divを置く
ボタンを置く(id は bt_visible)
ボタンを置く(id は bt_hidden)

idがbt_visibleの要素をクリックしたらbt_visible_clickedを実行する
idがbt_hiddenの要素をクリックしたらbt_hidden_clickedを実行する

idがdiv1の要素を取得する

この機能がやること
idがdiv1のstyleのvisibilityをvisibleにする


この機能がやること
idがdiv1のstyleのvisibilityをhiddenにする