<分区>
<分区>
我打算让几行矩形在页面下方垂直堆叠，并且我希望每个矩形(实际上是一个 div)在页面下方逐渐变亮。
这是 codepen.io 链接: http://codepen.io/Chiz/pen/gpNRMj
或者，这是我的 HTML:
<div></div>
还有我的 CSS(使用 SASS):
div
{
width:100%;
height:70px;
background-color:lighten(blue,0%);
border:1px solid white;
margin:-1px 0;
}
还有我的 jQuery:
var l;
var ccolor;
for(var i = 0; i <=10; i++)
{
l = $("<div></div>");
ccolor = i * 7;
$(l).css("background-color", "lighten(ccolor");
$("html").append(l);
}
我认为问题出在“lighten(ccolor”)”部分，因为我认为 ccolor 变量被写为文本，而不是实际变量。 这就是为什么 div 不会随着页面向下移动而变得更浅，而是所有 div 都是一种相同的颜色。
我该如何解决这个问题？谢谢!
最佳答案
解决变量问题。应该这样写:
var l;
var ccolor;
for(var i = 0; i <=10; i++)
{
l = $("<div></div>");
ccolor = i * 7;
$(l).css("background-color", "lighten(" + ccolor + ")");
$("html").append(l);
}
但是，War10ck的评论是正确的。您实际上需要一个 JS 函数来计算新颜色，因为 SASS 是在服务器上编译的。我建议看看这个问题 - Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
关于jquery - 使用 JQuery 将值写入 SASS 的 "lighten"方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32122491/
相关文章：
javascript - 在 android webview 中使用 html5 的 type=text 输入标签的 maxlength 不起作用
javascript - 如何更改jquery中所有表单输入的属性？
javascript - HTML:JavaScript:阻止表单提交和调用 Javascript 函数
javascript - 包含照片幻灯片的 iframe 在 Chrome 上中断
javascript - 使用js和css创建一个 'slide-in'菜单
java - 为什么输入类型 ="file"在浏览器上不起作用