我们可以通过javascript设置-moz-linear-gradient吗?无法为菜单栏中的下拉菜单项设置渐变色。 Here是JSFiddle
var coll = document.getElementById('menu-preview').getElementsByClassName('dropdown-1column');
if ( coll != null) {
for (var i = 0; i < coll.length; i++) {
coll[i].style.backgroundImage = "-moz-linear-gradient(top, #f1f471, #ffcc33)";
coll[i].style.backgroundImage = "-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#f1f471), to(#ffcc33))";
coll[i].style.backgroundImage = "linear-gradient(top, #f1f471, #ffcc33)";
}
}
更新-7-25:2322IS
我什至尝试了JQuery方式仍然没有运气,有些梯度无法反映出运行时创建的DOM项目
$('#backcolor').on('change', function () {
var color = $(this).val();
document.getElementById("menu-preview").style.backgroundColor = color;
var gradient = getSimilarColors(color);
$('.dropdown-1column').css('background', '-moz-linear-gradient(top,' + color + ',' + gradient + ')');
$('.dropdown-1column').css('background', '-webkit-gradient(linear, 0% 0%, 0% 100%, from(' + color + '),' + 'to(' + gradient + '))');
$('.dropdown-1column').css('background', 'linear-gradient(top,' + color + ',' + gradient + ')');
});
更新7-25:2335IS
感谢@nsthethunderbolt纠正了将近半天的错字问题...应该是dropdown1-column而不是dropdown-1column。谢谢男人,您救了我的一天!
最佳答案
更新了您的小提琴:
http://jsfiddle.net/586Ru/4/
和
var coll = document.getElementById('menu-preview').getElementsByClassName('dropdown1-column');
console.log(coll)
if ( coll != null) {
// console.log(coll)
for (var i = 0; i < coll.length; i++) {
coll[i].style.background = "-moz-linear-gradient(top, #f1f471, #ffcc33)";
coll[i].style.background = "-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f471), to(#ffcc33))";
coll[i].style.background = "linear-gradient(top, #f1f471, #ffcc33)";
}
}
效果很好,但是下拉鼠标悬停不正确,您必须对此进行处理。
关于javascript - 无法通过JavaScript将渐变颜色设置为DOM元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24960286/