.erb 文件中的内联 <% f.submit %> 样式答案

【问题标题】：Inline <% f.submit %> styling in a .erb file.erb 文件中的内联 <% f.submit %> 样式
【发布时间】：2016-07-05 06:53:44
【问题描述】：

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

<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 sn-p 创建的 HTML 并对其进行内联样式设置，但这似乎也不起作用（如果这样做也会感到草率，因为我的表单的其余部分是由 form_for 生成的）。因此，要么我需要一种方法来从我的 CSS 表中访问 @student 变量（这将是理想的），要么我需要在我的 .erb 文件中对这个按钮进行内联样式。另外，如果我最终能够设置背景颜色的样式，是否知道如何通过 CSS 动态生成该颜色的较暗阴影？我可以使用带有内嵌样式的 filter:contrast 或 filter:brightness 东西吗？

【问题讨论】：

标签： javascript html css ruby-on-rails embedded-ruby

【解决方案1】：

您可以使用 -"#{foo}"（双引号、哈希和大括号）插入变量，所以在您的情况下，它会是：

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

【讨论】：

【解决方案2】：

你应该这样做：

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

【讨论】：