JQuery: Setting CSS gradient isn't working

Question

EXAMPLE

I'm trying to set the background of an element to a gradient, however it's not setting. It's adding style="" to markup and it works when I put the code directly into firebug (I'm using Firefox). Any idea why it's not working or how I can get it to work?

$('main > article').each(function (index) {
    var bg = $(this).css('background-color');
    var nextbg = $(this).next().css('background-color');
    if ($(this).next().length && nextbg != bg) {
        $(this).css('background', 'linear-gradient(to bottom, ' + bg + ' 0%, ' + nextbg + ' 100%);');
        console.log('linear-gradient(to bottom, ' + bg + ' 0%, ' + nextbg + ' 100%);');
        console.log('------------');
    }
});

Vinky · Accepted Answer · 2014-05-23 09:25:41Z

5

Just remove the ";" at the end of your css

('main > article').each(function (index) {
    var bg = $(this).css('background-color');
    var nextbg = $(this).next().css('background-color');
    if ($(this).next().length && nextbg != bg) {
        $(this).css('background', 'linear-gradient(to bottom, ' + bg + ' 0%, ' + nextbg + ' 100%)');
        console.log('linear-gradient(to bottom, ' + bg + ' 0%, ' + nextbg + ' 100%);');
        console.log('------------');
    }
});

answered May 23, 2014 at 9:25

Vinky

3418 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamie Barker Over a year ago

facepalm - thanks! Knew it must be something daft! xD

Collectives™ on Stack Overflow

JQuery: Setting CSS gradient isn't working

EXAMPLE

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related