CSS3 Jquery Gradients - is there any way to read the values set?

Question

Lets say I have the following CSS:

._gradient {
    background-image: linear-gradient(top, #6AF 16px, #0032C8 24px);
    background-image: -o-linear-gradient(top, #6AF 16px, #0032C8 24px);
    background-image: -moz-linear-gradient(top, #6AF 16px, #0032C8 24px);
    background-image: -webkit-linear-gradient(top, #6AF 16px, #0032C8 24px);
    background-image: -ms-linear-gradient(top, #6AF 16px, #0032C8 24px);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(16px, #6AF),color-stop(24px, #0032C8));
}

Is there any way simple with Javascript or jQuery to read the values for the gradient position / direction / color?

obviously I could using Regular Expressions... the problem would lie in 'background-image' value returning a different value dependent on which browser was accessing the site: jsFiddle example

Basically now this led me to try just with the linear-gradient() value (aiming to do browser detect and apply the CSS with jQuery) but this returned the value 'none': jsFiddle example 2

Bare in mind my actual aim is to get these values dynamically with the script, not set them (although I'm willing for the solution to require me to do this).

EDIT FOR CLARIFICATION I am looking for a way to read the values in a gradient, even if gradients are not supported. using $.cssHooks is not the answer due to the fact that if the property is nou supported, it returns the value 'none' which has no benefit what so ever.

Doesn't work due to issue in example 2, like I said, I am trying to get the color , position and direction. If the data is available to cssHooks, it will also be returned by $(elem).css('background-image') however you can't 'get' unsupported CSS values and the having to regex for the different types of gradient supported in different browsers seems a little extreme. — Andrew Willis
– Andrew Willis, Commented Mar 13, 2012 at 15:29
i guess that's not possible without using regexp, and YES, you will have to check if the value is 'none', jump to the next possible type.. here a possible work-around that may work: <div class="_gradient" linear-gradient="blah|blah"></div> then read the attr from the element $('._gradient').html($('._gradient').attr('linear-gradient')); or even better use an attribute for every value you need, top, rgba, etc.. i hope that helps ! — spacebiker
– spacebiker, Commented Mar 13, 2012 at 16:12
it'd have to be data-linear-gradient="" to be HTML5 compliant but I was thinking along the same lines, then using jQuery to apply the gradient and PHP to generate the image file if no gradient was supported... Can't wait for the plain linear-gradient to be supported (in 50 years time...) — Andrew Willis
– Andrew Willis, Commented Mar 13, 2012 at 16:24

Greg · Accepted Answer · 2012-03-13 15:26:12Z

0

Does this roughly do what you want? http://jsfiddle.net/2wQed/2/

answered Mar 13, 2012 at 15:26

Greg

31.3k18 gold badges69 silver badges86 bronze badges

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

4 Comments

Andrew Willis Over a year ago

Unfortunately no, if an unsupported value is present it displays the name of the background image but ideally I need the position, color and direction values.

Greg Over a year ago

Ah ok. I know you don't want to do it that way but I can't see a simpler way without regex'ing the value in that case unfortunately...

Andrew Willis Over a year ago

Problem there is that in browsers that support no type of CSS gradient, it returns the value 'none' ... I think a solution might be to name the gradient file something like FFFFFF_10_CCCCCC_40_FF0000_100 but that's a complete nightmare to contemplate!

Andrew Willis Over a year ago

although not the correct answer, this is the closest anybody got to a correct answer and the actual answer to the question is "you can't do it"

Community · Accepted Answer · 2017-05-23 12:19:08Z

0

You may want to look at this...

http://api.jquery.com/jQuery.cssHooks/

found in here, not sure if it works, but maybe it worths tryin

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Mar 13, 2012 at 15:15

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

1 Comment

Andrew Willis Over a year ago

That was already suggested in the comments and again, it doesn't work for what I am trying to do.

Collectives™ on Stack Overflow

CSS3 Jquery Gradients - is there any way to read the values set?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related