Question

基本上我希望我的按钮的背景颜色是形状背景颜色的深色，这是由我访问＆＃39;编辑＆＃39的对象的颜色属性决定的。 ;的观点。目前我正在使用

<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动态生成该颜色的深色调？我可以使用滤镜：对比度或滤镜：亮度与内嵌造型？

Answer 1

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

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

Answer 2

你应该这样做：

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

内联＆lt;％f.submit％＆gt;在.erb文件中设置样式

2 个答案: