javascript - 如何通过 JavaScript 更改 CSS 渐变？

Question

我有一个应用了以下渐变的 div:

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #2E2E28 0%, #4D4C48 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #2E2E28 0%, #4D4C48 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2E2E28), color-stop(1, #4D4C48));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #2E2E28 0%, #4D4C48 100%);
/* IE10+ */
background: -ms-linear-gradient(top,  #2E2E28 0%,#4D4C48 100%);
/* W3C */
background: linear-gradient(top,  #2E2E28 0%,#4D4C48 100%);

如何将“#2E2E28”更改为另一个数字，但仍能避免跨浏览器的噩梦？

Answer 1

以下函数将采用两种颜色作为参数，并返回您指定的样式字符串，并将相应的子字符串替换为给定的颜色。

您可以在实际操作中看到这一点 here .

var makeGradientStyle = function(){
    var gradientString = '\
        /* Mozilla Firefox */ \
background-image: -moz-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Opera */ \
        background-image: -o-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Webkit (Safari/Chrome 10) */ \
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, {colour1}), color-stop(1, {colour2}));\
        /* Webkit (Chrome 11+) */ \
        background-image: -webkit-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* IE10+ */\
        background: -ms-linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
        /* W3C */\
        background: linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
    ';

    return function(colour1, colour2){
        return gradientString.replace(/\{colour1\}/g, colour1).replace(/\{colour2\}/g, colour2)
    }
}();

然后您可以按如下方式申请。缺点在于您要替换整个样式字符串，但您可以使用

来解决这个问题

var p = document.getElementById('p');

p.setAttribute('style', p.getAttribute('style') + '; ' + makeGradientStyle('#ff0000', '#0000ff'));