Fatal编程技术网
  • javascript/
  • Javascript 如何在Google Apps脚本Web应用程序中使用多种样式的CSS项目文件？

Javascript 如何在Google Apps脚本Web应用程序中使用多种样式的CSS项目文件？

javascript html css google-apps-script

Javascript 如何在Google Apps脚本Web应用程序中使用多种样式的CSS项目文件？,javascript,html,css,google-apps-script,Javascript,Html,Css,Google Apps Script,任务是再现本例中的图像https://jsfiddle.net/47rm8kwc/ 我从google创建的另一个文件STYLESHEET1 HTML（更改了颜色）的文档中获取了一个示例。发布时，我只看到最后应用的样式中相同颜色的线条。告诉我如何正确应用几种样式？ 多谢各位 <?!= include('Stylesheet'); ?> <p>First style.</p> <?!= include('Stylesheet1'); ?&

任务是再现本例中的图像
https://jsfiddle.net/47rm8kwc/
我从google创建的另一个文件STYLESHEET1 HTML（更改了颜色）的文档中获取了一个示例。发布时，我只看到最后应用的样式中相同颜色的线条。告诉我如何正确应用几种样式？ 多谢各位

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


   <p>First style.</p>

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

    <p>Second style.</p>


第一种风格

第二种风格
下面是我的一个带有样式的html文件的简单示例。我正在使用一个谷歌文件和一些我自己的风格

<!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>


#my_block{边框：2px纯黑色；背景色：rgba（0150255,0.2）；填充：10px 10px 10px 10px；}
#转换块{边框：1px纯黑色；填充：10px 10px 10px 10px；}
.bttn_块{填充：5px 0px 10px 0px；}
.sndr_块{边框：1px实心rgba（0150,0,0.5）；背景色：rgba（150150,0,0.2）；边距底部：2px；}
发送方1




发送方2




对话






$（函数（）{
$（“#发送者1”）。单击（sendMessage1）；
$（“#发送者2”）。单击（sendMessage2）；
$（'del msg'）。单击（删除对话）；
$（“#保存消息”）。单击（保存对话）；
$（“#刷新”）。单击（刷新对话）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.getConversation（）；
});
函数sendMessage1（）
{
var message=$（'#conversation'）.val（）+'\n指定1:\n'+$（'#sender1msg'）.val（）；
var newconversation={'thread'：消息，'active'：true}；
$（'#sender1msg'）.val（''）；
$（“#对话”）.css（“背景色”，“#ffe866”）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.savConversation（newconversation）；
}
函数sendMessage2（）
{
var message=$（'#conversation'）.val（）+'\n子项2:\n'+$（'#sender2msg'）.val（）；
var newconversation={'thread'：消息，'active'：true}；
$（'#sender2msg'）.val（''）；
$（“#对话”）.css（“背景色”，“#ffe866”）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.savConversation（newconversation）；
}
函数deleteConversation（）
{
var conversation={'thread'：'*******启动一个新线程******'，'active'：true}；
$（“#对话”）.css（“背景色”，“#ffe866”）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.对话（对话）；
}
函数saveConversation（）
{
var message=$（'#conversation'）.val（）；
var newconversation={'thread'：消息，'active'：true}；
$（“#对话”）.css（“背景色”，“#ffe866”）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.savConversation（newconversation）；
}
函数更新会话（会话）
{
$（'#conversation'）.val（conversation.thread）；
$（'#conversation'）.css（“背景色”、“白色”）；
}
函数refreshConversation（）
{
$（“#对话”）.css（“背景色”，“#ffe866”）；
google.script.run
.withSuccessHandler（updateConversation）
.withFailureHandler（显示状态）
.getConversation（）；
}
函数showStatus（）
{
dispStatus（'showStatus'，'This is status'）；
$（“#对话”）.css（“背景色”，“#ffb3b3”）；
}
log（'ModeLessDialogJavaScript'）；
var myVar=setInterval（刷新会话，10000）；
我想你可能想看一些简单的东西。

你为什么要在不同的文件中应用这些样式？我不太明白你想做什么。@Jordan Rhea我试图在一个项目中为不同的文件使用几种样式。但是为什么你的不同样式需要在不同的文件中？@Jordan Rhea可能我没有正确地阐述这个问题。我想在一个文件中构建样式，但我不知道如何窃取它。在样式表文件中，应该有不同的类名。每个类名可以有不同的CSS。谢谢你的例子！我是一个初学者，我还远远没有理解！）非常感谢。