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...

i say it returns the value, that YOUR SPECIFIC browser is currently using.. — honk31
– honk31, Commented Apr 29, 2014 at 18:05
looks like that, but I need first color to change background from gradient to plain, how do i get it? — Prosto Trader
– Prosto Trader, Commented Apr 29, 2014 at 18:07
you mean you are looking for the very first value aka. background: #ce4f57 !important; ? — honk31
– honk31, Commented Apr 29, 2014 at 18:12
Why can't you use toggleClass and other class methods? What's the limitation? — Jay Blanchard
– Jay Blanchard, Commented Apr 29, 2014 at 18:19
because it supposed to be one function for different classes...noumerous different classes — Prosto Trader
– Prosto Trader, Commented Apr 29, 2014 at 18:23

marcjae · Accepted Answer · 2014-05-05 12:54:59Z

4

+50

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);
});

edited May 5, 2014 at 12:54

answered May 5, 2014 at 12:11

marcjae

1,4109 silver badges8 bronze badges

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

2 Comments

Prosto Trader Over a year ago

your answer solves the problem (partially, for browsers that use linear-gradient property), but I was looking for general method of getting precompiled css

marcjae Over a year ago

@ProstoTrader I've updated the solution to work in browsers that do not support linear gradients

Jay Blanchard · Accepted Answer · 2014-04-29 18:28:48Z

0

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?

edited Apr 29, 2014 at 18:28

answered Apr 29, 2014 at 18:09

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

13 Comments

Prosto Trader Over a year ago

css('background-color') returns rgba(0, 0, 0, 0) which is not the case at all - I have red background, not black. css('background') at least returns gradient...

Jay Blanchard Over a year ago

Actually when I test css('background') it returns nothing in FF. Thanks for the downvote.

Prosto Trader Over a year ago

I use chrome of couse

Jay Blanchard Over a year ago

Actually the browser shouldn't matter. Are your visitors all going to be using Chrome?

Jay Blanchard Over a year ago

Gotcha. I wish you luck trying to figure it out, sounds like some overly complex CSS.

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related