如何在Google Apps腳本Web應用程序中使用多種樣式的CSS項目文件？

Question

任務是復制圖像，如本示例https://jsfiddle.net/47rm8kwc/我從Google文檔中舉了一個例子，創建了另一個文件STYLESHEET1 HTML（更改了顏色）。 發行時，我看到的是只有最后一次應用的樣式相同顏色的線。 告訴我如何正確應用幾種樣式？ 謝謝。

<?!= include('Stylesheet'); ?>


   <p>First style.</p>

    <?!= include('Stylesheet1'); ?>

    <p>Second style.</p>

Answer 1

這是我的一種帶樣式的html文件的簡單示例。 我正在使用Google文件和某些我自己的樣式。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <style>
      #my_block{border:2px solid black;background-color:rgba(0,150,255,0.2);padding:10px 10px 10px 10px;}
      #conv_block{border: 1px solid black;padding:10px 10px 10px 10px;}
      .bttn_block{padding:5px 0px 10px 0px;}
      .sndr_block {border:1px solid rgba(0,150,0,0.5);background-color:rgba(150,150,0,0.2);margin-bottom:2px;}
    </style>
  </head>
  <body>
  <form>
    <div id="my_block" class="block form-group">
      <div class="sndr_block">
        <strong>Sender 1</strong>
        <br /><input type="text" size="30"value="" id="sender1msg" class="action" />
        <br /><div class="bttn_block"><input type="button" value="Send" name="Sender1" id="sender1" class="action" /></div>
      </div>
      <div class="sndr_block">
        <strong>Sender 2</strong>
        <br /><input type="text" size="30" value="" id="sender2msg" class="action" />
        <br /><div class="bttn_block"><input type="button" value="Send" name="Sender2" id="sender2" class="action" /></div>
      </div>
      <div id="conv_block"> 
        <strong>Conversation</strong>
        <br /><textarea id="conversation" rows="10" cols="35"></textarea>
        <br /><input type="button" value="Save" name="Save" id="save-msg" class="action" />
        <input type="button" value="Delete" name="Delete" id="del-msg" class="action" />
        <input type="button" class="action" id="disp-log-setting" value="Settings" onClick="google.script.run.logSettings();" />
        <input type="button" value="Refresh" class="action" id="refresh" />
      </div>
      <div id="btn-bar">
        <br /><input type="button" value="Exit" onClick="google.script.host.close();" class="green" />
      </div>
    </div>
  </form>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
      $(function() {
        $('#sender1').click(sendMessage1);
        $('#sender2').click(sendMessage2);
        $('#del-msg').click(deleteConversation);
        $('#save-msg').click(saveConversation);
        $('#refresh').click(refreshConversation);
        google.script.run
           .withSuccessHandler(updateConversation)
           .withFailureHandler(showStatus)
           .getConversation();
      });

      function sendMessage1()
      {
        var message = $('#conversation').val() + '\nSender1:\n' + $('#sender1msg').val();
        var newconversation = {'thread': message, 'active': true};
        $('#sender1msg').val('');
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function sendMessage2()
      {
        var message = $('#conversation').val() + '\nSender2:\n' + $('#sender2msg').val();
        var newconversation = {'thread': message, 'active': true};
        $('#sender2msg').val('');
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function deleteConversation()
      {
        var conversation = {'thread': '***** Start a new thread *****', 'active': true};
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(conversation);
      }

      function saveConversation()
      {
        var message = $('#conversation').val();
        var newconversation = {'thread': message, 'active': true};
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
          .withSuccessHandler(updateConversation)
          .withFailureHandler(showStatus)
          .savConversation(newconversation);
      }

      function updateConversation(conversation)
      {
        $('#conversation').val(conversation.thread);
        $('#conversation').css("background-color", "white");
      }

      function refreshConversation()
      {
        $('#conversation').css("background-color", "#ffe866");
        google.script.run
           .withSuccessHandler(updateConversation)
           .withFailureHandler(showStatus)
           .getConversation();
      }

      function showStatus()
      {
        dispStatus('showStatus','This is status');
        $('#conversation').css("background-color", "#ffb3b3");
      }

     console.log('ModeLessDialogJavaScript');
   </script>
   <script>var myVar = setInterval(refreshConversation, 10000);</script>
  </body>
</html>

我只是認為您可能希望看到簡單的東西。

如何在Google Apps腳本Web應用程序中使用多種樣式的CSS項目文件？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-06-29 18:38:03

如何在Google Apps腳本Web應用程序中使用多種樣式的CSS項目文件？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-06-29 18:38:03

解決方案1
0 已采納 2017-06-29 18:38:03