無法通過javascript將漸變顏色設置為DOM元素

Question

我們可以通過javascript設置-moz-linear-gradient嗎？ 無法為菜單欄中的下拉菜單項設置漸變顏色。 這是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)";
        }
    }

UPDATE-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。 謝謝你，你救了我的一天！

Answer 1

更新了小提琴： 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)";
                    }
                }

效果很好，但是下拉懸浮式導航不正確，您必須對此進行處理。