我们可以通过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/

10-09 23:55
查看更多