谷歌应用脚本：分离 HTML 和 CSS答案

【问题标题】：Google app script : Separating HTML and CSS谷歌应用脚本：分离 HTML 和 CSS
【发布时间】：2014-04-16 19:00:41
【问题描述】：

我有一个与标题有关的问题。目前我正在尝试遵循谷歌的“最佳实践”。 https://developers.google.com/apps-script/guides/html/best-practices 我不知道为什么它不起作用。这是一个 MainPageCSS.html

<pre>
<style>
p {
  color: green;
}
</style>
</pre>

然后是服务器端功能：

function includeCSS() { 
var content = HtmlService.createTemplateFromFile('MainPageCSS').getRawContent();
  //.getContent();
return content;
}

我通过 HtmlService 使用边栏，并调用 google.script.run.withSuccessHandler(SuccessAddCss).includeCSS(); 我尝试了不同的方式将 css 添加到页面中，但没有人奏效......

function SuccessAddCss(Style){
   var styles = document.getElementById("allStyles").innerHTML += "p { color:red }";
   var text = styles.innerHTML;
   var styleNode = document.createElement('style');
   var styleText = document.createTextNode('p { color:red; } ');
   styleNode.appendChild(styleText);
   document.getElementsByTagName('head')[0].appendChild(styleNode);
   alert("ok");
};
function teso()
{
   google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
   alert(text);
};

为了以某种方式将 MainPageCSS 中的 css 添加到 MainPage id="allStyles" type="text/css"

<pre>
<style id="allStyles" type="text/css">
h2{
font-family: Times New Roman, Times, serif;
font-size: 14px;
text-align: center;
}
</style>

</pre>

侧边栏也以 SandBox.Native 模式启动，因此它允许 css 动态更改。谢谢你的帮助。

【问题讨论】：

标签： javascript html css google-apps-script

【解决方案1】：

在我的网站中，我使用 scriptlet 来包含 CSS 文件。

HTML：

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

<div>Some Content Here</div>
<form>A form</form>
<button>A button</button>

这就是从 HTML 文件调用 include 函数的方式。只是好奇，你能试着去掉<pre>标签，看看有什么不同吗？

【讨论】：