LANG SELRCT

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

2018年3月11日日曜日

ヘッダ付きのカードを動的に作る


CSSでカードのヘッダを作りたい で作ったヘッダ付きのカードをJavaScriptで作ってみる




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




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 360px;
      min-height: 240px;
      border-radius: 3px;
      border: solid 1px lightgray;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
      margin-bottom: 20px;
      margin-right: 20px;
    }

    .card_header {
      color: white;
      font-weight: bold;
      background-color: deepskyblue;
      padding: 15px;
      border-radius: 3px 3px 0px 0px
    }

    .card_content {
      padding: 15px;
    }
  </style>
</head>
<body>
  <div id="main_div"></div>

  <script>
    document.addEventListener('DOMContentLoaded', create_card());

    function create_card() {
      var parent_div = document.getElementById("main_div");
      var card_div = create_card_div(parent_div);
      var card_header = create_card_header(card_div);
      var card_content = create_card_content(card_div);
    }

    function create_card_div(parent_div) {
      var card_div = document.createElement("div");
      card_div.setAttribute("class", "card");
      parent_div.appendChild(card_div);
      return card_div;
    }

    function create_card_header(card_div) {
      var card_header = document.createElement("div");
      card_header.setAttribute("class", "card_header");
      card_header.textContent = "header";
      card_div.appendChild(card_header);
    }

    function create_card_content(card_div) {
      var card_content = document.createElement("div");
      card_content.setAttribute("class", "card_content");
      card_content.textContent = "content";
      card_div.appendChild(card_content);
    }
  </script>
</body>
</html>