Question

Google电子表格的Google脚本中的以下代码会打开一个HTML对话框：

function openEmailForm(nameTo, emailAddressTo) {
   Logger.log('openEmailForm ran!');

   var html = HtmlService.createHtmlOutputFromFile('EmailForm')
      //.setTitle('Send Email To: ' & nameTo & '(' & emailAddressTo & ')')
      .setHeight(480)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);


    SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
    .showModalDialog(html, 'Send Email To: ' + nameTo + ' (' + emailAddressTo + ')');
      return;
 };

使用表单的HTML我可以设置所有正文（和子）元素的样式，如附图所示 - 正文背景颜色设置为黄色，标题设置为绿色。

如何设置html表单的样式：表单背景和表单标题（＆＃34;发送电子邮件给...）？我似乎无法获得那些款式。我确定了他们的类名（使用Firebug），但是忽略了应用于它们的所有CSS样式。

见附图：

这是此表单的HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

<style>
body {
    background-color: #fafab6; 
    }

.modal-dialog {
   background-color: #fafab6; 
}

.modal-dialog-title-text {
   color: green;
}

p.fieldLabel {
  color: green;
}
</style>

  </head>
  <body  onload="setFocusToTextBox()">
    <div>
      <form>
         <p class="fieldLabel">Subject:</p>
         <p><textarea id="subject" name="subject" cols="50" rows="1" autofocus></textarea></p>
         <p class="fieldLabel">Message:</p>
         <p><textarea id="body" name="body" cols="50" rows="15"></textarea></p>
         <br><input type="submit" value="Send" id="submitbutton" onmouseup="writeFormData()">
      </form>
    </div>

<script>

  window.onload = function() {
  document.getElementById("subject").focus();
};

  window.setFocusToTextBox = function (){
    document.getElementById("subject").focus();
};


  window.writeFormData = function() {
    //console.log('writeFormData ran!');
    var emailSubject = document.getElementById("subject").value;
    var emailBody = document.getElementById("body").value;

    //google.script.host.close();
    google.script.run
      .withSuccessHandler(dataWasWritten)
      .processEmailForm(emailSubject, emailBody);



  };

  window.dataWasWritten = function() {
    //console.log('dataWasWritten ran');
    //Utilities.sleep(3000);
    google.script.host.close();
  };


</script>

  </body>
</html>

样式化Google Script Spreadsheet HTML表单

0 个答案: