javascript - 在 .erb 文件中内联 <% f.submit %> 样式

Question

基本上，我希望我的按钮的背景颜色是表单背景颜色的深色阴影，该颜色由我正在访问其“编辑” View 的对象的颜色属性决定。目前我正在使用

<div class="formPageBG" id="formPageBG" style="background-color: <%=@student.color%>">

访问时动态设置背景颜色。但是，我不确定如何访问由

生成的按钮上的相同内联样式属性

<div class="action">
  <%= f.submit "Update" %>
</div>

此按钮通过 .action:input 在 CSS 中设置样式，但我无法从我的 CSS 工作表访问 @student 变量。我研究了很多不同的方法来尝试解决这个问题，比如将数据传递给 Javascript 或使用来自 Javascript 的 SASS 变量，但我不知道如何将 ruby​​ 变量正确地放入 CSS 表中。我已经使用内联样式，因为它是一个 .erb 文件并且变量已经存在。我尝试了一些不同的语法，比如

<%= f.submit "Update", style: 'background-color:<%=@student.color%>'%>
<%= f.submit "Update", :style => 'background-color:<%=@student.color%>'}%>
<%= f.submit "Update", {:style => 'background-color:<%=@student.color%>;'}%>
<%= f.submit "Update", {:style => 'background-color:<%=@student.color%>'}%>

但这些都没有用。我也试过只复制这个 ruby​​ 片段创建的 HTML 并设置内联样式，但这似乎也不起作用(如果它这样做也会感到草率，因为我的表单的其余部分是由 form_for 生成的)。因此，要么我需要一种从我的 CSS 工作表访问 @student 变量的方法(这将是理想的)，要么在我的 .erb 文件中为这个按钮设置内联样式。另外，如果我最终能够设置背景颜色的样式，知道如何通过 CSS 动态生成该颜色的深色阴影吗？我可以将 filter:contrast 或 filter:brightness 与内联样式一起使用吗？

Answer 1

您可以使用 - "#{foo}"(双引号、井号和大括号)插入变量，因此在您的情况下它将是:

<%= f.submit "Update", style: "background-color: #{@student.color} "%>