get css background property of gradient element by .css()

Question

I'm trying to switch from gradient background to plain background of an element by using jquery.

For some reasons I can't use toggleClass and othe class methods, so I have to modify css properties of an element - background color in my case.

Problem is, that when I'm trying to receive current background css property, .css() method returns something weird.

I have en element with multiple background (gradient) properties, optimized for different browsers

 .element {
       background: #ce4f57 !important;
       background: -moz-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ce4f57), color-stop(100%, #b7333b)) !important;
       background: -webkit-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -o-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: -ms-linear-gradient(top, #ce4f57 0%, #b7333b 100%) !important;
       background: linear-gradient(to bottom, #ce4f57 0%, #b7333b 100%) !important;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce4f57', endColorstr='#b7333b', GradientType=0) !important;
     }

When I try to receive that property

 $('.element').css('background');

I get this:

 rgba(0, 0, 0, 0) linear-gradient(rgb(206, 79, 87) 0%, rgb(183, 51, 59) 100%) repeat scroll 0% 0% / auto padding-box border-box

JsFiddle

As far as I understand, it's compiled property? Can I get original css by js function? If not pls advise how to write regexp to get first color of gradient, assuming there might be differenet compiled css in different browsers...

Answer 1

If you would like to select the first point (0%) of the gradient you can do so by

var css = $('.element').css('background-image');

Then split it into a RGB value

var gradient = css.split('0%')[0].split('linear-gradient(')[1]

In Chrome and FF it works correctly. You can test it using the following fiddle: http://jsfiddle.net/6hvZT/277/

Update - That will be Cross browser compatible:

$("button").click(function(){    
    var css = $('.element').css('background-image');
    var bg_color;

    if ( css === 'none' ) {
        bg_color = $('.element').css('background-color');
    } else {
        bg_color = css.split('0%')[0].split('linear-gradient(')[1]                  
    }

    $('#css').html(bg_color);
}); 

Answer 2

Your code just needed a little tweaking - http://jsfiddle.net/jayblanchard/6hvZT/267/

$("button").click(function(){    
    var css = $('.element').css('background-color'); // note the change
    $('#css').html(css);
}); 

In the fiddle the inline style should override the assigned class, but it looks like there is more at play here. It doesn't matter what the inline or applied style is, the click returns 'transparent' which is the inherited style. If you comment out the CSS then you get a return for the inline style.

I was able to use toggleClass() in this example - http://jsfiddle.net/jayblanchard/6hvZT/270/

$('#b1').click(function() {
    $('#foo').toggleClass('element1 element2');
});

Isn't that what your original question was?